Hi, I wanted to create the following view, that include VStack composed of HStack of buttons and a text object on bottom.
my guidelines were
-
in button's HStack, the buttons should spread evenly over the entire container.
-
in containing VStack, the division should be that the label take 10% of the whole view, button's HStack will consume additional 30% and the text will take the rest (another 60%)
-
when the main view is opened, the size will be 500x300.
So here's my code :
struct ContentView: View {
@State var buttonText: String = ""
var body: some View {
GeometryReader { metrics in
VStack (alignment: .leading) {
Label("my swiftui demo", systemImage: "gearshape")
.frame(width: 400, height: metrics.size.height * 0.1, alignment: .center)
HStack(alignment: .center, spacing: 10) {
Button("A") {
self.buttonText = "aaa\nbbb\nccc"
}
Button("B") {
self.buttonText = "bbb"
}
Button("C") {
self.buttonText = "aaa"
}
Button("D") {
self.buttonText = "bbb"
}
}
.frame(width: 400, height: metrics.size.height * 0.30)
.border(Color.black)
Text(buttonText)
.frame(width:400, height: metrics.size.height * 0.50)
.background(Color.white)
.border(Color.black)
}
.frame(width: 500, height: 300, alignment: .center)
}
}
}
and here's the result I got. It can be seen that the containing view's width takes much more than the selected 500. and the buttons are not evenly spread over the button's HStack. Perhaps anybody can instruct me how to fix it ? further comments are also appreciated 
Thanks