swiftui列表视图布局问题

Question

我制作了一个“RowView”，并希望使用 swiftUI 显示列表中的每一行。

我希望每一行都像这样：

因此我编写了代码。基于 GeometryReader，我希望行占据屏幕高度的 1/4，然后是全宽，带有填充和圆角。

我写的代码如下：

var body: some View {
    HStack {
        GeometryReader {g in
            ZStack {

                Image("Dummy")                      
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: g.size.width, height: g.size.height/4)
                    .frame(width: g.size.width)
                    .clipped(antialiased: true)
                    .cornerRadius(25)

                VStack {
                    HStack {
                        Spacer()
                        Image(systemName: "photo.on.rectangle.angled")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width:g.size.height/18, height: g.size.height/18)
                        Text("A Long Titlte here................")
                            .font(.title2)
                            .bold()
                            .minimumScaleFactor(0.1)
                        Spacer()
                    }.background(Color.red)
                }.frame(width: g.size.width, height: g.size.height/6)
                .frame(width: g.size.width, height: g.size.height/12)
                .background(Color.white)
                .opacity(0.7)
                .offset(y:g.size.height/18)
                
            }
        }.padding()
    }
}

在我创建了这个 RowView 之后，我创建了 ListView。

代码如下：

var body: some View {
    NavigationView {
        GeometryReader{ g in
        List {
            ForEach(modelData.rows) { row in
                RowView(property: row)
            }
        }.navigationBarTitle("ListView")
        }
    }
}

但是，行高并没有想象中的那么高，而是缩小了。

我不想对行的高度进行“硬编码”。有什么方法可以根据我在 RowView 中设置的内容制作显示每个 RowView 的 ListView？

Answer 1

您有两个GeometryReaders（一个包裹另一个）可能会产生一些有趣的效果，尤其是因为内部的List，也是ScrollView。

仅使用外部视图（列表周围的那个）并将高度作为参数（或框架修饰符）传递给内部视图怎么样？

类似：

var body: some View {
    NavigationView {
        GeometryReader{ g in
        List {
            ForEach(modelData.rows) { row in
                RowView(property: row)
                 .frame(height: g.size.height / 4)
            }
        }.navigationBarTitle("ListView")
        }
    }
}

然后，在您的行中，您的VStack 上现在连续有两个frame 修饰符。摆脱那里无关紧要的东西。

Answer 2

我也找到了解决办法。

GeometryReader 与可用的父容器的height 和width 一起使用。

所以你必须给父容器一个固定的高度。您可以使用屏幕尺寸来实现您想要的结果。

var body: some View {
    NavigationView {
        GeometryReader{ g in
            List {
                ForEach(modelData.rows) { row in
                    RowView(property: row)
                        .frame(height: UIScreen.main.bounds.size.height/4) // <--
                }
            }.navigationBarTitle("ListView")
        }
    }
}