swiftui - SwiftUI 中的内容拥抱优先行为

Question

我有一个 列表由单元格组成，每个单元格包含一个图像和一列文本，我希望以特定的方式布局。左侧图像，占宽度的四分之一。文本的剩余空间，左对齐。
这是我得到的代码:

struct TestCell: View {
    let model: ModelStruct

    var body: some View {
        HStack {
            Image("flag")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: UIScreen.main.bounds.size.width * 0.25)
            VStack(alignment: .leading, spacing: 5) {
                Text("Country: Moldova")
                Text("Capital: Chișinău")
                Text("Currency: Leu")
            }
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
        }
    }
}

struct TestCell_Previews: PreviewProvider {
    static var previews: some View {
        TestCell()
            .previewLayout(.sizeThatFits)
            .previewDevice("iPhone 11")
    }
}

这里有两个例子:


如您所见，整个单元格的高度根据图像的纵横比而变化。
100 万美元的问题 - 我们如何使单元格高度紧贴文本(如第二张图像中)而不发生变化，而是在分配的矩形内以 scaleAspectFit 方式缩小图像
笔记!

文本的高度可以变化，所以没有硬编码。

无法使用 PreferenceKey s，因为单元格将成为列表的一部分，并且我试图了解单元格重用的一些特殊行为，以及 onPreferenceChange当 2 个连续的单元格具有相同的高度时不会被调用。要展示所有这些组合行为，请确保您的模型在测试时因单元格而异。

Answer 1

这是一个可能的解决方案，但是它在 VStack 的背景属性中使用 GeometryReader 来检测它们的高度。然后将该高度应用于图像。我用过 SizePreferenceKey来自 this解决方案。

struct SizePreferenceKey: PreferenceKey {
    typealias Value = CGSize
    static var defaultValue: Value = .zero

    static func reduce(value _: inout Value, nextValue: () -> Value) {
        _ = nextValue()
    }
}

struct ContentView6: View {

    @State var childSize: CGSize = .zero
    
    var body: some View {
        HStack {
            Image("image1")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: UIScreen.main.bounds.size.width * 0.25, height: self.childSize.height)
            VStack(alignment: .leading, spacing: 5) {
                Text("Country: Moldova")
                Text("Capital: Chișinău")
                Text("Currency: Leu")
            }
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
            .background(
                  GeometryReader { proxy in
                    Color.clear.preference(key: SizePreferenceKey.self, value: proxy.size)
                   }
                 )
        }
        .onPreferenceChange(SizePreferenceKey.self) { preferences in
          self.childSize = preferences
        }
        .border(Color.yellow)

    }
      

}

看起来像这样……当然，您可以为图像应用不同的纵横比。