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()
2
Answers
I added
.frame(UIScreen.main.bounds.width - 20.0)
to the Text component.did you try using flexible container? so depending on the button frame/hstack you can use maxWidth: .infinity