Question

想象一下像导航栏这样的东西-左侧和中央都有一个项目。我可以使用SwiftUI创建此布局。（ZStack是一种方法。）

但是如果文本太长，我想通过将中心项移到上方来避免重叠。通过使用一个优先级将中心项约束到其父项的中心，然后限制它们不以更高的优先级重叠，我可以通过自动布局来做到这一点。

我一直希望我在SwiftUI中有类似约束的东西。

可以在SwiftUI中进行这种布局吗？

Answer 1

您可以结合使用嵌入式HStacks，fixedSized()和layoutPriority()操作。

源代码

struct CentreTheDarnTextView: View {
    var titleText: String
    var body: some View {
        HStack {
            HStack {
                Text("I am Left Text")
                    .fixedSize()
                Spacer()
            }
            Text(titleText)
                .layoutPriority(1)
                .minimumScaleFactor(0.5)
                .lineLimit(1)
                .foregroundColor(.red)
            HStack {
                Spacer()
                Text("")
            }
        }.padding(.all, 8)
    }
}

struct CentreTheDarnTextView_Previews: PreviewProvider {
    static var previews: some View {
        CentreTheDarnTextView(titleText: "I am Centre Text")
            .previewLayout(.fixed(width:400, height:44))
        CentreTheDarnTextView(titleText: "I am much longer Centre Text")
            .previewLayout(.fixed(width:400, height:44))
        CentreTheDarnTextView(titleText: "I am rediculously long Centre Text that makes programmers cry")
            .previewLayout(.fixed(width:400, height:44))
    }
}

.fixedSize()强制文本不被剪切，并以全尺寸布局。
.layoutPriority(1)与非常类似，但是您仍然可以应用.minimumScaleFactor()，.lineLimit()处理空间不足的情况。
空的Text("")是秘密调味料。

Answer 2

一种选择是仅使用HStack，UI会尝试将长文本包装成多行：

    HStack {
        Text("first text www eee rrr ttt yyy uuuuu")
        Spacer()
        Text("second text xxxx ccccc vvvvv bbbbb")
        Spacer()
    }.padding(10).border(Color.black)

带有左视图和中心视图的SwiftUI布局，可避免重叠

2 个答案: