watchos - 使用 SwiftUI 的 subview 宽度相等

Question

我正在尝试使用 SwiftUI 构建一个简单的 watchOS UI，并在按钮上方并排显示两条信息。

我希望每一边(在 VStack 中表示为 HStack )占据可用宽度的一半(所以它在黄色父 View 中是均匀的 50/50 分割)在 |在下面的示例中，字符以按钮为中心。

我要短的和长的!!!文本要在每边的 50% 内居中。

我从这段代码开始，将元素放置到位并显示一些不同堆栈的边界:

var body: some View {
    VStack {
        HStack {

            VStack {
                Text("Short").font(.body)
            }
                .background(Color.green)

            VStack {
                Text("Longer!!!").font(.body)
            }
                .background(Color.blue)

        }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.yellow)
        Button (action: doSomething) {
            Text("|")
        }
    }
}

这给了我这个结果:


然后，当谈到让每个并排 VStack可用宽度的 50%，我卡住了。我认为应该可以添加 .relativeWidth(0.5)每个 VStack ，据我所知，这应该使每个 VStack其父 View 宽度的一半( HStack ，带有黄色背景):

var body: some View {
    VStack {
        HStack {

            VStack {
                Text("Short").font(.body)
            }
                .relativeWidth(0.5)
                .background(Color.green)

            VStack {
                Text("Longer!!!").font(.body)
            }
                .relativeWidth(0.5)
                .background(Color.blue)

        }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.yellow)
        Button (action: doSomething) {
            Text("|")
        }
    }
}

但这是我得到的结果:


如何使用 SwiftUI 获得我想要的行为？

更新:在更多地查看 SwiftUI 文档后，我看到了 the example here设置一个框架，然后定义与该框架相比的相对宽度，所以也许我不应该使用 relativeWidth通过这种方式？

使用以下代码，我离我想要的更近了一步:

var body: some View {
    VStack {
        HStack {

            VStack {
                Text("Short").font(.body)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.green)

            VStack {
                Text("Longer!!!").font(.body)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.blue)

        }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.yellow)
        Button (action: doSomething) {
            Text("|")
        }
    }
}

产生这个结果:



现在，我想弄清楚是什么在两个 VStack 之间的中间产生了额外的空间。 s。到目前为止，尝试摆脱填充和忽略安全区域似乎不会影响它。

Answer 1

我仍然对何时以及如何感到困惑 relativeWidth应该被使用，但我能够在不使用它的情况下实现我想要的。 ( 2019 年 7 月 18 日编辑: 根据 iOS 13 Beta 4 发行说明，relativeWidth 现在已弃用)

在对我的问题的最后一次更新中，我在两侧之间有一些额外的间距，并意识到这是 HStack 中的默认间距。我可以通过将其间距设置为 0 来删除它。这是最终的代码和结果:

var body: some View {
    VStack {
        HStack(spacing: 0) {

            VStack {
                Text("Short").font(.body)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.green)

            VStack {
                Text("Longer!!!").font(.body)
            }
                .frame(minWidth: 0, maxWidth: .infinity)
                .background(Color.blue)

        }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.yellow)
        Button (action: doSomething) {
            Text("|")
        }
    }
}

结果如下: