如何在SwiftUI中的ForEach中嵌入的HStack中设置相对宽度? [英] How to set relative width in a HStack embedded in a ForEach in SwiftUI?

问题描述

我想创建一个属性列表(不使用列表"视图).每个属性都是一个HStack，其中包含两个文本，即名称和值.我希望名称文本始终具有整个HStack宽度的30％，而值文本则要使用其余水平空间.每个属性的高度取决于内容.

I wanted to create a list (without using List view) of attributes. Each attribute is a HStack which contains two texts, name and value. I want the name text to have always 30% of the width of the whole HStack and the value text to use the rest of the horizontal space. The height of each attribute depends on the content.

我试图通过以下观点来实现这一目标:

I try to accomplish it by having a following view:

struct FatherList: View {
    let attributes: Attributes
    
    init(_ attributes: Attributes) {
        self.attributes = attributes
    }
    
    var body: some View {
        VStack(spacing: CGFloat.spacing.medium) {
            ForEach(
                attributes,
                id: \.name,
                content: ChildView.init
            )
        }
    }
}

其中包含以下ChildView:

which contains the following ChildView:

struct ChildView: View {
    let listItem: Product.Attribute
    
    init(_ attribute: Product.Attribute) {
        self.attribute = attribute
    }
    
    var body: some View {
        GeometryReader { geometry in
            HStack(alignment: .top, spacing: 0) {
                Text(attribute.name)
                    .bold()
                    .frame(width: 0.3 * geometry.size.width)
                    .background(Color.yellow)
                Text(attribute.value)
            }
            .fixedSize(horizontal: false, vertical: true)
            .background(Color.red)
        }
    }
}

我得到的结果是:

子视图重叠，这不是我想要的，我希望子视图扩展并互相跟随.我正在使用geometryReader完成上述的相对宽度.我在做什么错了?

The child views overlap which is not what I want, I want the child views to expand and follow each other. I am using geometryReader to accomplish the relative width that I described above. What am I doing wrong?

推荐答案

此处是可能解决方案的演示.使用Xcode 11.4/iOS 13.4进行了测试

Here is a demo of possible solution. Tested with Xcode 11.4 / iOS 13.4

注意:ViewHeightKey来自这是我的另一种解决方法

struct ChildView: View {
    let attribute: Attribute

    @State private var fitHeight = CGFloat.zero

    var body: some View {
        GeometryReader { geometry in
            HStack(alignment: .top, spacing: 0) {
                Text(self.attribute.name)
                    .bold()
                    .frame(width: 0.3 * geometry.size.width, alignment: .leading)
                    .background(Color.yellow)
                Text(self.attribute.value)
                    .fixedSize(horizontal: false, vertical: true)
                    .frame(width: 0.7 * geometry.size.width, alignment: .leading)
            }
            .background(Color.red)
            .background(GeometryReader {
                Color.clear.preference(key: ViewHeightKey.self,
                    value: $0.frame(in: .local).size.height) })
        }
        .onPreferenceChange(ViewHeightKey.self) { self.fitHeight = $0 }
        .frame(height: fitHeight)
    }
}

这篇关于如何在SwiftUI中的ForEach中嵌入的HStack中设置相对宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！