在没有 space 或重叠的情况下在 SwiftUI 中排列自定义视图

Question

我正在尝试从多个自定义视图中构建一个 UI (SwiftUI / iOS)。所有这些自定义视图都为其框架定义了纵横比或比率。

这是此类自定义视图的简化版本：

    struct TestView: View {
        var body: some View {
            GeometryReader { geometry in
                RoundedRectangle(cornerRadius: 20)
                    .foregroundColor(Color.blue)
                    .frame(height: geometry.size.width / 3)
            }
        }
    }

我的 ContentView 目前看起来像这样：

    struct TestContentView: View {
        var body: some View {
            GeometryReader {geomerty in
                VStack {
                    TestView()
                    TestView()
                }
            }
        }
    }

我想让这两个矩形位于彼此的正下方（在屏幕顶部）。所以他们之间没有任何 space 。所以有点像老式的 UITableView，只有行。

但无论我尝试什么，我只能得到以下两个结果之一：

它们在屏幕上均匀分布（垂直）
它们重叠（=顶部视图的垂直尺寸仅为 20

到目前为止我找到的唯一解决方案是也在 TestContentView() 中定义子视图的框架大小。但这似乎很不迅速 UI.

谢谢！

Answer 1

从您的内容视图中删除 GeometryReader，因为它没有任何作用
您说您的 TestView 具有定义的纵横比，但实际上并没有——它只是具有定义的宽度。如果您定义纵横比，它将按预期开始工作：

struct TestView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .foregroundColor(Color.blue)
            .aspectRatio(3, contentMode: .fit)
    }
}

struct TestContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            TestView()
            TestView()
            Spacer()
        }
    }
}

在没有 space 或重叠的情况下在 SwiftUI 中排列自定义视图

Arrange custom views in SwiftUI without space or overlap

swift

swiftui

custom-view