带有适合内容的列的 SwiftUI 网格？

Question

SwiftUI 可以实现这种布局吗？

我希望第一列包含标签的大小，所以在这种情况下，它会大到足以显示“更大的标签：”。然后将剩余的空间留给第二列。

这个布局非常简单，带有自动布局。

SwiftUI 2020 有 LazyVGrid，但我看到的设置列大小的唯一方法是使用硬编码数字。他们不明白多语言和用户可调整字体大小会导致什么问题吗？

Answer 1

如果比较代码行数以在两个世界中以编程方式实现这一点并不那么复杂......

无论如何，这是可能的。这是一个基于使用视图首选项功能的一些帮助修饰符的解决方案。不难。没有网格。

使用 Xcode 12 / iOS 14 准备和测试演示。

struct DemoView: View {
    @State private var width = CGFloat.zero

    var body: some View {
        VStack {
            HStack {
                Text("Label1")
                    .alignedView(width: $width)
                TextField("", text: .constant("")).border(Color.black)
            }
            HStack {
                Text("Bigger Label")
                    .alignedView(width: $width)
                TextField("", text: .constant("")).border(Color.black)
            }
        }
    }
}

和助手

extension View {
    func alignedView(width: Binding<CGFloat>) -> some View {
        self.modifier(AlignedWidthView(width: width))
    }
}

struct AlignedWidthView: ViewModifier {
    @Binding var width: CGFloat

    func body(content: Content) -> some View {
        content
            .background(GeometryReader {
                Color.clear
                    .preference(key: ViewWidthKey.self, value: $0.frame(in: .local).size.width)
            })
            .onPreferenceChange(ViewWidthKey.self) {
                if $0 > self.width {
                    self.width = $0
                }
            }
            .frame(minWidth: width, alignment: .trailing)
    }
}