iosiphoneswiftuilayoutvstack

Same Width for views in swiftUI

I have a List and a button in VStack.

The button width needs to be the same as the ListView Width.

How can I make it the same in SwiftUI? I am just a beginner in swiftUI, so I don't know any modifiers

enter image description here or something.

Solution

  • You can force a View to use all the width available by setting .frame(maxWidth: .infinity) (so maxWidth and not width, ref. comments). This modifier needs to come before you set the background, if you want the background to have the full width too.

    Like this:

    VStack {
    List(1...15, id: \.self) { num in
        Text("\(num)")
    }
    .listStyle(.plain)
    .shadow(radius: 10)

    Button("Confirm") {}
        .foregroundColor(.white)
        .frame(maxWidth: .infinity) // <- ADDED
        .padding()
        .background(.black)
}
.padding()

    Button

    If you're experimenting with modifiers then you might like to try it this way too:

    Button {} label: {
    Text("Confirm")
        .frame(maxWidth: .infinity)
}
.buttonStyle(.borderedProminent)
.foregroundColor(.white)
.tint(.black)

    BTW, another time, please paste the actual code into your question. This will make it easier for everyone wanting to help you to reproduce the problem. Thx.