如何在 HStack 中始终位于中心的 Spacer 之间建立视图？

Question

我想达到的目标。无论两侧文本宽度的宽度如何，按钮都应始终位于HStack.

HStack {
    Text("Foooooooo")
    Spacer(minLength: 5)
    Button(action: { }) {
        Text("Bar")
    }
    Spacer()
    Text("Baz")
}
.font(.system(size: 16, weight: .heavy, design: .rounded))
.padding()

我还试图用GeometryReader与用于每组帧大小Text和Button然而有两个问题在视图中，

1. 返回的视图GeometryReader将占据父级提供给它的整个视图，而不是实际的内在内容大小，空间只够Text,Spacer和Button
2. 第一个里面的字符串Text不能左对齐，最后一个里面的字符串Text也不能右对齐

Answer 1

这是您案例的可能方法。使用 Xcode 12 / iOS 14 准备和测试的演示

    HStack {
        Spacer()
            .overlay(Text("Foooooooo"), alignment: .leading)

        Button(action: { }) {
            Text("Bar")
        }

        Spacer()
            .overlay(Text("Baz"), alignment: .trailing)
    }
    .font(.system(size: 16, weight: .heavy, design: .rounded))
    .padding()

Answer 2

您想要布局三个灵活但大小相同的元素，但您有三个固定但大小不同的元素。为了解决这个问题，把每个元素放在它自己的灵活堆栈中（HStack w/spacer），这样每个元素都可以得到 1/3 的空间。在每个堆栈中，使用 Spacers 进行对齐。

    HStack {
        // Left stack
        HStack {
            Text("Foooooooo")
            Spacer()
        }

        // Center stack. The surrounding Spacers aren't really required in this
        // specific case, but added for consistency and to show how to center.
        HStack {
            Spacer()
            Button(action: { }) {
                Text("Bar")
            }
            Spacer()
        }

        // Right stack
        HStack {
            Spacer()
            Text("Baz")
        }
    }
    .font(.system(size: 16, weight: .heavy, design: .rounded))
    .padding()