Создайте сетку кнопок одинаковой ширины и высоты в SwiftUI

Question

Я пытаюсь создать калькулятор, используя SwiftUI, я сейчас борюсь за создание сетки кнопок, чтобы заполнить доступное пространство по горизонтали

Сейчас я просто пытаюсь сделатькнопки заполняют сетку 3 x 3 равной высоты и ширины

Я смог сделать их одинаковой высоты, используя Spacer() в соответствии с этим ответом , но та же ширина, где я нахожусьзастрял прямо сейчас:

import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack(alignment: .center, spacing: 50) {
            HStack(alignment: .center, spacing: 50) {
                Button(action: {}) {
                    Text("7")
                    Spacer()
                }.background(Color.green)
                Button(action: {}) {
                    Text("8")
                    Spacer()
                }.background(Color.yellow)
                Button(action: {}) {
                    Text("9")
                    Spacer()
                }.background(Color.green)
            }
            HStack(alignment: .center, spacing: 50) {
                Button(action: {}) {
                    Text("4")
                    Spacer()
                }.background(Color.yellow)
                Button(action: {}) {
                    Text("5")
                    Spacer()
                }.background(Color.green)
                Button(action: {}) {
                    Text("6")
                    Spacer()
                }.background(Color.yellow)
            }
            HStack(alignment: .center, spacing: 50) {
                Button(action: {}) {
                    Text("1")
                    Spacer()
                }.background(Color.green)
                Button(action: {}) {
                    Text("2")
                    Spacer()
                }.background(Color.yellow)
                Button(action: {}) {
                    Text("3")
                    Spacer()
                }.background(Color.green)
            }
        }.aspectRatio(contentMode: .fill)
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

Это мой текущий вывод по сравнению с примером желаемого выхода, который я хочу.Прежде всего я пытаюсь сделать кнопки для заполнения текущей области, позже я попытаюсь сделать кнопку 0, чтобы заполнить 2 ячейки.

Answer 1

Как насчет использования GeometryReader (документы здесь) ?Они дают размеры своего родительского взгляда детям.Вот частичная реализация, основанная на том, что у вас уже есть:

import SwiftUI

struct ContentView : View {
    var body: some View {
        VStack {
            Text("0")
            NumpadView()
        }
    }
}

struct NumpadView : View {

    let rows: Length = 5
    let columns: Length = 4
    let spacing: Length = 10

    var horizontalEdges: Length {
        return columns - 1
    }

    var verticalEdges: Length {
        return rows - 1
    }

    func getItemWidth(containerWidth: Length) -> Length {
        return (containerWidth - spacing * horizontalEdges) / columns
    }

    func getItemHeight(containerHeight: Length) -> Length {
        return (containerHeight - spacing * verticalEdges) / rows
    }

    var body: some View {
        GeometryReader { geometry in

        VStack(alignment: .center, spacing: self.spacing) {
            HStack(alignment: .center, spacing: self.spacing) {
                Button(action: {}) {
                    Text("7")
                        .frame(width: self.getItemWidth(containerWidth: geometry.size.width), height: self.getItemHeight(containerHeight: geometry.size.height))
                        .background(Color.green)
                    }

                Button(action: {}) {
                    Text("8")
                        .frame(width: self.getItemWidth(containerWidth: geometry.size.width), height: self.getItemHeight(containerHeight: geometry.size.height))
                        .background(Color.yellow)
                    }

                Button(action: {}) {
                    Text("9")
                        .frame(width: self.getItemWidth(containerWidth: geometry.size.width), height: self.getItemHeight(containerHeight: geometry.size.height))
                        .background(Color.green)
                    }
                }

            HStack(alignment: .center, spacing: self.spacing) {
                Button(action: {}) {
                    Text("4")
                        .frame(width: self.getItemWidth(containerWidth: geometry.size.width), height: self.getItemHeight(containerHeight: geometry.size.height))
                        .background(Color.yellow)
                }

                Button(action: {}) {
                    Text("5")
                        .frame(width: self.getItemWidth(containerWidth: geometry.size.width), height: self.getItemHeight(containerHeight: geometry.size.height))
                        .background(Color.green)
                }

                Button(action: {}) {
                    Text("6")
                        .frame(width: self.getItemWidth(containerWidth: geometry.size.width), height: self.getItemHeight(containerHeight: geometry.size.height))
                        .background(Color.yellow)
                }
            }

            HStack(alignment: .center, spacing: self.spacing) {
                Button(action: {}) {
                    Text("1")
                        .frame(width: self.getItemWidth(containerWidth: geometry.size.width), height: self.getItemHeight(containerHeight: geometry.size.height))
                        .background(Color.green)
                }

                Button(action: {}) {
                    Text("2")
                        .frame(width: self.getItemWidth(containerWidth: geometry.size.width), height: self.getItemHeight(containerHeight: geometry.size.height))
                        .background(Color.yellow)
                }

                Button(action: {}) {
                    Text("3")
                        .frame(width: self.getItemWidth(containerWidth: geometry.size.width), height: self.getItemHeight(containerHeight: geometry.size.height))
                        .background(Color.green)
                }
            }

            HStack(alignment: .center, spacing: self.spacing) {
                Button(action: {}) {
                    Text("0")
                        .frame(width: self.getItemWidth(containerWidth: geometry.size.width) * 2 + self.spacing, height: self.getItemHeight(containerHeight: geometry.size.height))
                        .background(Color.yellow)
                }

                Button(action: {}) {
                    Text(".")
                        .frame(width: self.getItemWidth(containerWidth: geometry.size.width), height: self.getItemHeight(containerHeight: geometry.size.height))
                        .background(Color.yellow)
                }
            }

            }.frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

Выглядит так: