macOS Same Width For List And Scrollview

[Dezy]

Sorry for posting again but I can’t work out this problem.

I’m trying to make my ScrollView the same width as my List.

Previously I did manage to get these things the same width, but then my ScrollView didn’t have a scrollbar. So I started all over again and, while I got the scrollbar to be visible, I now can’t work out how to get these widths the same size.

In the code below, I can adjust the List’s width but I can’t for the Scrollview. And that’s weird. So I must be doing it wrong. Anyway I’ve tried various things but if someone could help me out with this that would be good.

Thanks!

import SwiftUI
struct ContentView: View
{

@State var selection: String?
let names = ["First", "Second", "Third"]

var body: some View
{

TabView
{

VStack
{

List(selection: $selection)
{
ForEach(names, id: \.self)
{
item in Text(item)
}
}
.border(Color.black, width: 1)
.frame(width: 100, height: 100)

ScrollView
{
ForEach(1..<100)
{ index in
Text("\(index)")
}
}
.border(Color.black, width: 1)
.frame(width: 100, height: 100)
}

.tabItem
{
Text("Tab 1")
}

}}}

 

[Dezy]

I think I've solved the width problem.

VStack
{
List(selection: $selection)
{
ForEach(names, id: \.self)
{
item in Text(item)
}
}
.frame(width: 500, height: 100)
.border(Color.black, width: 1)
.padding(.top, 30)

ScrollView
{
if selection == "First"
{
Text("The 1st item.")
.padding(20)
}
               
if selection == "Second"
{
Text("The 2nd item. The 2nd item. The 2nd item. The 2nd item. The 2nd item. The 2nd item. The 2nd item. The 2nd item. The 2nd item. The 2nd item.\n\nMore text. More text. More text. More text. More text.\n\nMore text. More text. More text. More text. More text. More text. More text.")
.padding(20)
}
               
if selection == "Third"
{
Text("The 3rd item.\n\nAnd this is the next line. The 3rd item.\n\nAnd this is the next line. The 3rd item.\n\nAnd this is the next line.")
.padding(20)
}

//                    ForEach(1..<100)
//                    { index in
//                    Text("\(index)")
//                    }

}
.frame(width: 500, height: 100, alignment: .topLeading)
.border(Color.black, width: 1)
.padding(.top, 30)
               
Spacer()
           
}

But now there's ANOTHER problem.

When I click on the 'Second' item in the list, the text and scrollbar is in the correct position.

But when I click on the 'Third' item in the list, the text and scrollbar are pushed over to the left of the scrollview (the scrollbar is positioned in the center of the scrollview.) And it appears to have something to do with the /n/n line breaks. But this problem isn't happening in the 'Second' if statement.

Why is this? Why doesn't it work? Why is the world so cruel?

 

[casperes1996]

Try putting your Text views inside of an HStack and adding a Spacer() line beneath them.

You may also consider putting all your strings inside an array and just having a single Text(strings[number]) where number is set based on selection instead. Would make it substantially shorter and easier to read

 

[Dezy]

Right.... Hi Capser. I don't know exactly what I need to do in terms of the first sentence. Could you give me an example of this please?

 

[casperes1996]

Right.... Hi Capser. I don't know exactly what I need to do in terms of the first sentence. Could you give me an example of this please?

Sure.
Instead of

Text("The 3rd item.\n\nAnd this is the next line. The 3rd item.\n\nAnd this is the next line. The 3rd item.\n\nAnd this is the next line.")
.padding(20)

Just try

HStack {
    
    Text("The 3rd item.\n\nAnd this is the next line. The 3rd item.\n\nAnd this is the next line. The 3rd item.\n\nAnd this     Is the next line.")
    .padding(20)
    Spacer()
}

The problem here is that the way layouts happen. It's the contents inside the scroll view that determine the scroll sections. Think of a scroll view like a double container. It has its outside and its inside. Its outside is the space it takes up in screen space. Its inside is what's actually scrollable. The outside bit is what you put a frame on but that doesn't mean the scrollable area necessarily expands if there's no inside there. (Might be explaining it confusingly but hope it makes sense)

By adding an HStack with a Spacer, what we're doing is pushing every text field to horizontally fill available space, even when line breaks mean the text itself doesn't fill the horizontal space.

Hope that makes sense

 

[Dezy]

Ah you beat me to it

I was going to post and say 'I managed to work out what you meant and my code now works.' so that I didn't waste your time. But I was too slow. Oh well, thanks for the information Casper, when I'm relaxed I'll try to understand it.

Speaking of which, I should say that the changes DID NOT go smoothly (not your fault, I'm thinking Xcode's fault). Anyway, I'll post back here soon when I'm less stressed out.

 

[casperes1996]

Ah you beat me to it

I was going to post and say 'I managed to work out what you meant and my code now works.' so that I didn't waste your time. But I was too slow. Oh well, thanks for the information Casper, when I'm relaxed I'll try to understand it.

Speaking of which, I should say that the changes DID NOT go smoothly (not your fault, I'm thinking Xcode's fault). Anyway, I'll post back here soon when I'm less stressed out.

Don’t worry about it. Hope all works out for you and you can figure out why it works - Just let me know if you need help with the other issues that cropped up.

As long as programming is a hobby and not your main work, keep it fun and don’t burn yourself out

 

[Dezy]

The outside bit is what you put a frame on but that doesn't mean the scrollable area necessarily expands if there's no inside there.

(Might be explaining it confusingly but hope it makes sense)

That’s not confusing at all. What is confusing is that I didn’t come across this information while trying to solve this problem (probably my fault.) And I understand it now, although it does seem like an odd way of doing things. But what do I know, right?

By adding an HStack with a Spacer, what we're doing is pushing every text field to horizontally fill available space, even when line breaks mean the text itself doesn't fill the horizontal space.

THIS is brilliant. I would never have thought of doing this. And applying this fix not only fixes the centered scrollbar issue, it also fixes another problem where, ever so slightly, the text wasn’t aligning completely to the left. And now it does… Nice work Casper

Just let me know if you need help with the other issues that cropped up.

Long story short, while testing the app it crashed twice and after the second reboot (with the power button) the app worked perfectly (with no code changes at all.) So I don’t know what’s up with Xcode but at least there’s no other issues to solve!

As long as programming is a hobby and not your main work, keep it fun and don’t burn yourself out

The fun starts after I’ve mastered the basics. And that is a long way away. But point taken.

And let me say again, thanks for helping me Casper. Your code worked beautifully and I learnt something along the way. So thanks goes to you once again!

 

[casperes1996]

Long story short, while testing the app it crashed twice and after the second reboot (with the power button) the app worked perfectly (with no code changes at all.) So I don’t know what’s up with Xcode but at least there’s no other issues to solve!

Hm. Odd. Is this with beta software, like macOS Monterey and Xcode13?

THIS is brilliant. I would never have thought of doing this. And applying this fix not only fixes the centered scrollbar issue, it also fixes another problem where, ever so slightly, the text wasn’t aligning completely to the left. And now it does… Nice work Casper

Ey just happy it works for you

That’s not confusing at all. What is confusing is that I didn’t come across this information while trying to solve this problem (probably my fault.) And I understand it now, although it does seem like an odd way of doing things. But what do I know, right?

Right, so a tip for along the way; Generally the .frame modifier is a bit of a "forceful" tool. It's one of those things you can use to forcefully fiddle with layout of things, but the more you can do without using what I think of as "forceful" tools, the more SwiftUI will help you out and understand your layouts.

With all my tips though I will ask that you keep in mind; I am by no means a SwiftUI expert myself. In fact, I haven't really used SwiftUI at all. I've almost exclusively programmed with AppKit and UIKit. Those skills of course translate to an extend to other things like SwiftUI in this instance, but I'm just saying if you hear other advise elsewhere, it may be better

 

[Dezy]

Hm. Odd. Is this with beta software, like macOS Monterey and Xcode13?

No it’s just the regular setup. So yeah it is odd. Maybe it’s some other software that I’ve got on this computer that causes it, or maybe I changed something else other than the code. I’ll keep my eye on it though.

Right, so a tip for along the way…..

Thanks for the tip. I agree, forcing is sort of like bending the rules, and I’d rather not do that if I can.

With all my tips though…..

I don’t care whether you’re an expert or a green alien from Mars, you’re the man. The man who's helped me solve my programming problems. And that’s fine by me