SwiftUI - 如何让网格列缩小到内容宽度？

Question

我正在处理一个网格，我希望第一列缩小到内容的宽度，第二列填充剩余空间。使用 IB 和布局约束这类事情相对简单，但它让我在 SwiftUI 中难倒了。

基本上我有这样的代码:

@State var sliderValue1: Float = 0.5
@State var sliderValue2: Float = 0.25

var body: some View {

    let col1 = GridItem(alignment: .leading)
    let col2 = GridItem()

    LazyVGrid(columns: [col1, col2]) {
        Text("Short").border(Color.green)
        Slider(value: $sliderValue1, in: 0.0 ... 1.0, step: 0.25).border(Color.red)
        Text("Rather long").border(Color.green)
        Slider(value: $sliderValue2, in: 0.0 ... 1.0, step: 0.25).border(Color.red)
    }
    .border(Color.blue)
}

如您所见，两列的大小相同，这不是我想要的。我想要做的是将第一列的宽度缩小到“相当长”标签的宽度。我无法使用 .fixed(...) 指定大小，我已经尝试了各种 .flexible(...) 定义，但没有成功。

有人需要调整列的大小以适应内容吗？

Answer 1

感谢@asperi，我在提到的帖子中进行了更多挖掘，并提出了以下代码。基本上我最终放弃了网格，因为我发现即使使用首选项键将值传递回层次结构，网格也会设置宽度并且不允许标签计算我需要的大小。所以垂直和水平堆叠就是答案，允许正确调整大小。

// The preference key used to advise parent views of a change in value.
struct LabelWidthPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = .zero

    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        print("Reducing \(value) \(nextValue())")
        value = max(value, nextValue())
    }
}

// A modifier that wraps a view in a geometry reader.
// This allows us to measure the size of a view and send that back up the view heirarchy
// so the display can be sized to fit.
struct LabelWidthObserver: ViewModifier {

    func body(content: Content) -> some View {
        return content.background {
            GeometryReader { geometry in
                background(geometry: geometry)
            }
        }
    }

    private func background(geometry: GeometryProxy) -> some View {
        Color.clear.preference(key: LabelWidthPreferenceKey.self, value: geometry.size.width)
    }
}

struct ContentView: View {

    @State private var sliderValue1: Float = 0.5
    @State private var sliderValue2: Float = 0.25
    @State private var labelWidth: CGFloat = 20.0

    var body: some View {
                
        VStack {
            aspect(withTitle: "Short")
            aspect(withTitle: "Rather long")
        }
        .border(Color.blue).padding(5)
        .onPreferenceChange(LabelWidthPreferenceKey.self) {
            print("Incoming label width \($0)")
            labelWidth = max(labelWidth, $0)
        }
    }

    @ViewBuilder
    func aspect(withTitle title: String) -> some View {
        HStack {
            Text(title)
                .border(Color.green)
                .frame(minWidth: labelWidth, alignment: .leading)
                .modifier(LabelWidthObserver())
            Slider(value: $sliderValue1, in: 0.0 ... 1.0, step: 0.25).border(Color.red)
        }
        .border(.yellow).padding(5)
    }
}

产生:

您可以在其中看到标签和 slider 现在的行为就像它们在列中一样，即使它们不是。