How do I extend the width of my Button component in my SwiftUI view?

Question

How do I extend the width of Buttons in my SwiftUI screen so they occupy the full width of the screen less 10 points as a margin?

Here is my code;

struct SelectView: View {
    @State var resultsIsSelected = false
    var body: some View {
        ZStack {
            Color(.systemTeal)
                .edgesIgnoringSafeArea(.all)
            VStack(spacing: 30) {
                NavigationLink(isActive: $resultsIsSelected) {
                    ResultsView()
                } label: {
                    Button {
                        resultsIsSelected = true
                    } label: {
                        Text("Search by first letter")
                            .foregroundColor(.white)
                            .font(.system(size: 25.0))
                            .padding()
                            .navigationTitle("Select Search Option")
                            .navigationBarTitleDisplayMode(.inline)
                    }
                    .background(.blue)
                    .clipShape(RoundedRectangle(cornerRadius: 30.0))
                }
                
                NavigationLink(isActive: $resultsIsSelected) {
                    ResultsView()
                } label: {
                    Button {
                        resultsIsSelected = true
                    } label: {
                        Text("Search by cocktail name")
                            .foregroundColor(.white)
                            .font(.system(size: 25.0))
                            .padding()
                    }
                    .background(.blue)
                    .clipShape(RoundedRectangle(cornerRadius: 30.0))
                }
                
                NavigationLink(isActive: $resultsIsSelected) {
                    ResultsView()
                } label: {
                    Button {
                        resultsIsSelected = true
                    } label: {
                        Text("Search by ingredient")
                            .foregroundColor(.white)
                            .font(.system(size: 25.0))
                            .padding()
                    }
                    .background(.blue)
                    .clipShape(RoundedRectangle(cornerRadius: 30.0))
                }
            }
        }
    }
}

struct SelectView_Previews: PreviewProvider {
    static var previews: some View {
        SelectView()
    }
}

And here is a screenshot of my SwiftUI view

I have tried padding() and frame() on the Text component and the Button component and the VStack and the ZStack but nothing works. I have a feeling it is something to do with the clipShape modifier or the RoundedRectangle()

Stephen501 · Accepted Answer · 2021-10-19 14:59:39Z

1

I added .frame(UIScreen.main.bounds.width - 20.0) to the Text component.

answered Oct 19, 2021 at 14:59

Stephen501

17114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Swish · Accepted Answer · 2021-10-19 14:49:32Z

0

did you try using flexible container? so depending on the button frame/hstack you can use maxWidth: .infinity

answered Oct 19, 2021 at 14:49

Swish

161 bronze badge

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Stephen501 Over a year ago

@Swish thanks for your suggestion. I have posted my solution.

Tikhon Petrishchev · Accepted Answer · 2023-11-28 20:17:27Z

0

Just use .frame(maxWidth: .infinity) modifier and padding:

Button {
    resultsIsSelected = true
} label: {
    Text("Search by first letter")
        .foregroundColor(.white)
        .font(.system(size: 25.0))
        .padding()
}
.frame(maxWidth: .infinity)
.background(.blue)
.clipShape(RoundedRectangle(cornerRadius: 30.0))
.padding(.horizontal, 10)

answered Nov 28, 2023 at 20:17

Tikhon Petrishchev

3042 silver badges10 bronze badges

Collectives™ on Stack Overflow

How do I extend the width of my Button component in my SwiftUI view?

3 Answers 3

Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Related