swiftui - 带有适合内容的列的 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)
    }
}