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

问题描述

SwiftUI可以进行这种布局吗？

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

使用自动布局，这种布局非常简单。

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

解决方法

比较两个代码行的数量以编程方式在两个世界中做到这一点并不那么复杂...

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

使用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)
    }
}