如何在 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中的字符串也无法右对齐。

- Dummy

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()

- Asperi

---

覆盖在隔板上的叠层，非常巧妙！ - Bart van Kuik

Answer 2

您希望布局三个弹性但大小相同的元素，但是您只有三个固定大小但不同的元素。要解决此问题，请将每个元素放入自己的弹性堆栈（使用带有 spacer 的 HStack），以便每个元素获得 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()

- Rob Napier

Answer 3

这里有另一种做法，非常简洁，使用ZStack将居中的按钮与只含一个Spacer的HStack组合在一起，将标签推到边缘:

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

注意：此解决方案适用于您知道您的标签不会侵占您的按钮的情况。@Asperi的解决方案导致过长的标签被截断为“...”。@RobNapier的解决方案会导致过长的标签在1/3的宽度处换行。

- vacawama