如何在始终位于HStack中心的Spacers之间进行查看？

问题描述

我想实现的目标。不管两侧的文本宽度的宽度如何，按钮都应始终位于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和{{1 }}
2. 第一个Button内的字符串不能左对齐，所以最后一个Text内的字符串不能右对齐

解决方法

您想布局三个大小相同但大小可变的元素，但是您有三个大小固定但不同的元素。要解决此问题，请将每个元素放入其自己的灵活堆栈（带有分隔符的HStack）中，以便每个元素获得1/3的空间。在每个堆栈中，使用空格键对齐。

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

,

这里是您可能的解决方法。使用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,design: .rounded))
    .padding()

,

这是另一种简洁的方法，它使用 $phoneDetails->toGoSubscription($deviceDetails->id)->get(); 将居中的按钮和ZStack与一个HStack组合在一起，以将标签推到边缘：

Spacer

注意：如果您知道标签不会侵害按钮，则此解决方案有效 。 @Asperi的解决方案导致多余的标签被ZStack { HStack { Text("Foooooooo") Spacer() Text("Baz") } Button(action: { }) { Text("Bar") } } .font(.system(size: 16,design: .rounded)) .padding() 截断。 @RobNapier的解决方案使超长标签以宽度的1/3包裹。