macOS List Alignment In Tab

[Dezy]

I’m trying to put a list at the top of a tab. But when I use this code, the list stays in the center of the screen…..

TabView {
VStack
{
List(names, id: \.self, selection: $selection)
{
name in
Text(name)
}
.frame(width: 600, height: 100, alignment: .top)
}
.tabItem
{
Image(systemName: "1.square.fill")
Text("Tab 1")
}
}

I tried using padding but that didn’t work.
I tried using ‘Alignment(horizontal: .center, vertical: .top)’ but that didn’t work.
I even tried pretending that it worked but that also didn’t work.

So, what WILL work?

Thank you for any assistance

 

[casperes1996]

Why do you specify a frame? If you don't specify a frame for the List of text items, it will push it to the top.
Alternatively, add a Spacer() below the frame thing if you want to keep it within a frame. A Spacer will fill all available space. By filling the space below, it pushes it up so to speak.
But if you just remove the .frame line it'll also get pushed to the top.

 

[casperes1996]

I even tried pretending that it worked but that also didn’t work.

Hm. Weird. That's usually the best troubleshooting tactic hehe

 

[Dezy]

Why do you specify a frame?

I was using a frame to change the width and height of the list and then on the web I saw some alignment code that was included with the frame code. So that's why I'm using a frame, with alignment. I think that answers the question.

If you don't specify a frame for the List of text items, it will push it to the top.
Alternatively, add a Spacer() below the frame thing if you want to keep it within a frame. A Spacer will fill all available space. By filling the space below, it pushes it up so to speak.
But if you just remove the .frame line it'll also get pushed to the top.

When I don't use the following code...

.frame(width: 600, height: 100, alignment: .top)

The list uses the entire width and height of the tab. But what I used to fix the problem was.....

.frame(width: 600, height: 100)
Spacer()

Yay!

Recently I had read about this 'fill all available space" feature. And I actually had tried to use it in my code...... But for some reason, instead of using Spacer() I was using .padding() and not surprisingly it didn't work. Oops.

Thanks again Casper!

 

[Dezy]

Hm. Weird. That's usually the best troubleshooting tactic hehe

You're absolutely right! And even though it may not have worked this time, I'm certainly going to keep this (little known) strategy up my sleeve

 

[casperes1996]

I was using a frame to change the width and height of the list and then on the web I saw some alignment code that was included with the frame code. So that's why I'm using a frame, with alignment. I think that answers the question.

The list uses the entire width and height of the tab. But what I used to fix the problem was.....

Yeah. If you add more UI elements though it should shrink again. It's made to always take up all available space. But if less space is available it'll then of course take up less. It's situational what you want and it sounds like you were using the frame for the right reasons, it's just that in probably most cases the behaviour of it filling all available space is what you want.

Recently I had read about this 'fill all available space" feature. And I actually had tried to use it in my code...... But for some reason, instead of using Spacer() I was using .padding() and not surprisingly it didn't work. Oops.

Glad you got it working the way you want
Yeah, padding only adds a little bit of empty space *all around* a view (can be specifically targeted directions, but by default all directions), where a Spacer "pushes" empty spaces as much as possible in the code direction. And when I say code direction I just mean that if you put the Spacer above the List instead, the List will be at the very bottom instead. Code lays out the views top to bottom, so the Spacer's placement determines where it fills in empty space so to speak.