CODEWITHSUNDEEP
swiftui
Stephen501
Stephen501

Reputation: 161

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

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 enter image description here

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()

Upvotes: 1

Views: 1407

Answers (3)

Tikhon Petrishchev
Tikhon Petrishchev

Reputation: 304

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)

Upvotes: 0

Stephen501
Stephen501

Reputation: 161

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

Upvotes: 1

Swish
Swish

Reputation: 16

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

Upvotes: 0

Related Questions