ios - SwiftUI:带有固定和邻居的棘手布局？

Question

下面的布局很容易用老式的自动布局实现，但我看不出如何用 SwiftUI 做同样的事情。这是我要呈现的 View 示例:

这显示了同一 View 的 3 个变体。该 View 有 3 个文本子项。左、中、右，具有以下属性:

• 左 View 和右 View 固定到父 View 的前导和尾随，中心 View 始终在父 View 中保持居中 (1)
• 如果任一侧 View 缺失或为空，则中心 View 保持居中 (2)
• 中心 View 增长，直到它碰到任一侧 View ，然后剪裁其内容 (3)

我能做的最好的就是下面的示例，但它的缺点是中心 View 优先于侧 View ，因此会剪裁它们。

如何使用 SwiftUI 布局实现此目的？

import SwiftUI

struct MyExample: View {

    let leftText:String
    let mainText:String
    let rightText:String

    var body: some View {
        HStack{
            HStack {
                Text(self.leftText)
                    .modifier(MyBigFont())

                Spacer()
            }

            Text(self.mainText)
                .modifier(MyBigFont())
                .layoutPriority(1.0)

            HStack {
                Spacer()
                Text(self.rightText)
                    .modifier(MyBigFont())

            }
        }
    }

}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            MyExample(leftText:"ABC", mainText:"1234", rightText:"XYZ").padding()
            MyExample(leftText:"", mainText:"1234", rightText:"XYZ").padding()
            MyExample(leftText:"ABC", mainText:"1234567890", rightText:"XYZ").padding()
            Spacer()
        }
    }
}

struct MyBigFont: ViewModifier {
    func body(content: Content) -> some View {
        content
            .lineLimit(1)
            .font(Font.system(size: 42).bold())
    }
}

输出:

Answer 1

如果左侧或右侧太宽以至于需要截断，这可以使中间部分不居中，但除此之外，我相信将 fixedSize() 添加到侧面 Texts 是您所需要的。 Text 上的 fixedSize() 表示不允许截断或换行，这正是您要查找的内容。

var body: some View {
    HStack{
        HStack {
            Text(self.leftText)
                .modifier(MyBigFont())
                .fixedSize()   // <====

            Spacer()
        }

        Text(self.mainText)
            .modifier(MyBigFont())
            .padding(.horizontal)
            .layoutPriority(1.0)


        HStack {
            Spacer()
            Text(self.rightText)
                .modifier(MyBigFont())
                .fixedSize()    // <====
        }
    }
}

---

您在评论中提出的问题非常好，也是解释其工作原理的一个很好的借口。在我看来，这里没有什么棘手的，所以理解它是件好事。

From the 'layoutPriority' docs: "A parent layout should offer children with the highest layout priority all the space offered to the parent minus the minimum space required for all its lower-priority children, and so on for each lower priority value." (emphasis mine) Doesn't that imply SwiftUI should give the side texts a minimum size to fit their content?

SwiftUI 为侧边文本提供最小尺寸以适应其内容。截尾文本的最小大小是绘制一个字符和一个省略号所需的空间。 理想(水平)大小是在一行中绘制所有文本而不换行所需的大小。

因此，外部 HStack 首先向两个内部 HStack 询问它们的最小大小。他们依次询问 Text 的最小大小(第一个字符加上省略号)，Spacer 的最小值为零。

然后外部 HStack 取这两个最小值并从总数中减去它们并将其提供给中心文本。

当您添加 fixedSize 时，这会告诉 Text 将其最小大小报告为在一行上绘制整个字符串所需的大小，因此现在每个内部 HStack 都将其作为最小大小，并且center 文本被提供更少的空间。

在这两种情况下，中间的 Text 都会告诉外部的 HStack 它将使用多少空间，必要时进行截断(因为它没有 fixedSize)。

外部 HStack 减去该空间，然后考虑其他两个 child 。它们同样灵活(因为都包含一个垫片)，所以它提供的空间是左边的一半。左边的人完全拿走了它提供的东西 (*)，所以另一半提供给右边的人，右边的人也拿走了所有的东西。

(*) 在我们这里讨论的大多数情况下。在足够窄的容器中，所需的最小尺寸可能会大于可用尺寸。在那种情况下， child 会得到比提供的更多的东西，事情就会溢出他们的界限。