ScrollView 内的 ForEach 不占用整个宽度

Question

我正在尝试使用 SwiftUI 重新创建我当前应用程序的 UI。而且这比我最初的难度要大得多。我想实现带有一些背景的卡片式单元格。我发现这List不支持，至少目前是这样。List是如此有限 - 它不允许您移除细胞分离器。

所以我搬到了ForEach里面ScrollView。我想这不应该用于长表的生产，但现在应该可以使用。我遇到的问题是ForeEach视图没有采用所有ScrollView提供的宽度。我可以设置.frame(...)修饰符，但这需要我绝对不想做的硬编码宽度。

任何想法如何强制VStack采用 ScrollView 的全宽？我试图使用ForeEach没有VStack与它有同样的问题。似乎ScrollView（父视图）“告诉”它的子视图（VStack）它的框架小于实际ScrollView的框架。并基于该信息子视图构建其布局和大小。

这是我目前的结果：

这是代码：

struct LandmarkList : View {
    var body: some View {
        NavigationView {
            ScrollView() {
                VStack {
                    Spacer().frame(height: 160)
                    ForEach(landmarkData) { landmark in
                        LandmarkRow(landmark: landmark).padding([.leading, .trailing], 16)
                    }
                }.scaledToFill()
                .background(Color.pink)
            }
            .background(Color.yellow)
            .edgesIgnoringSafeArea(.all)
            .navigationBarTitle(Text("Landmarks"))

        }
    }
}

struct LandmarkRow : View {
    var landmark: Landmark

    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Text(landmark.name).font(.title)
                Text("Subtitle")
                    .font(.callout)
                    .color(.gray)
            }
            Spacer()
            Text("5 mi")
                .font(.largeTitle)
            }.frame(height: 80)
            .padding()
            .background(Color.white)
            .cornerRadius(16)
            .clipped()
            .shadow(radius: 2)
    }
}

Answer 1

这个问题的答案可能只是将你的scrollView包装在一个GeometryReader

就像这里的答案 ->如何使用 SwiftUI 将视图拉伸到其父框架？