layout - 如何水平居中作为 SwiftUI 中视图组一部分的视图

Question

我正在尝试在屏幕底部水平布局两组标签（“<<”，“<”，“^”，“”，“>>”，“[]”）和（“M”）使用 SwiftUI 的约束条件是 ("M") 组位于屏幕的右下角，并且 ("<<","<","^",">",">>","[ ]") 组以“^”元素与屏幕的水平中心对齐的方式居中。

我试过这个：

        VStack {
            Spacer()
            HStack {
                Spacer()
                Spacer()
                HStack.init(spacing: 4) {
                    Text("<<")
                    Text("<")
                    Text("^") // this view should be aligned to horizontal center of screen
                        .padding([.leading, .trailing], 16)
                    Text(">")
                    Text(">>")
                    Text("[]")
                        .padding(.leading, 8)
                }
                Spacer()
                Text("M")
                    .padding(2)
            }
        }

看起来像这样：

我不知道如何约束“^”与水平中心对齐。

使用自动布局我可以很容易地做到这一点，将“^”的 center-x 锚定到父 center-x 锚点，然后将其余元素锚定到“^”，其中“M”将锚定到底部- 右锚。

标签： layoutswiftui

Answer 1

一个简单的解决方案是在两侧使用相同长度的 Text 和 .hidden() 修饰符。

（我在这里使用Group，因为我超过10个限制视图）

VStack {
    Spacer()
    HStack {
        Group {
            Text("M").hidden()
            Spacer()
            Text("[]").hidden()
            Text("<<")
            Text("<")
        }
        Group {
            Text("^")
            Text(">")
            Text(">>")
            Text("[]")
            Spacer()
            Text("M")
        }
    }
}