Ios ForEach inside ScrollView不'；不要全宽

我正在尝试使用SwiftUI重新创建当前应用程序的UI。这比我最初认为的要困难得多。 我想实现一些背景的卡片状细胞。我发现

List

至少目前还不支持这一点<代码>列表非常有限-它不允许您删除单元格分隔符

所以我转到了

ForEach

内部

ScrollView

。我想这不应该用在长表的生产中，但现在应该可以用了。我的问题是，

foreach

视图并没有占据

ScrollView

提供的所有宽度。我可以设置

.frame（…）

修改器，但这需要硬编码宽度，我绝对不想这样做

如何强制

VStack

占据整个滚动视图的宽度？我尝试在不使用VStack的情况下使用

foreach

，但它也有同样的问题。似乎

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)
    }
}

---

我也遇到了同样的问题，到目前为止，我找到的唯一方法是修复

滚动视图

和内容视图的宽度，这样您在内容视图中添加的每个子视图都将居中

我创建了一个简单的包装器，将宽度作为init参数

struct CenteredList<Data: RandomAccessCollection, Content: View>: View where Data.Element: Identifiable {

    public private(set) var width: Length
    private var data: Data
    private var contentBuilder: (Data.Element.IdentifiedValue) -> Content

    init(
        width: Length = UIScreen.main.bounds.width,
        data: Data,
        @ViewBuilder content: @escaping (Data.Element.IdentifiedValue) -> Content)
    {
        self.width = width
        self.data = data
        self.contentBuilder = content
    }

    var body: some View {
        ScrollView {
            VStack {
                ForEach(data) { item in
                    return self.contentBuilder(item)
                }.frame(width: width)
            }
            .frame(width: width)
        }
        .frame(width: width)
    }
}

---

答案可能只是将滚动视图包装在

GeometryReader

---

就像这里的答案一样->

您可以将VStack添加到HStack中，底部和顶部带有间隔垫圈（），这将需要全屏显示。不知道这是否适用于滚动视图或not@PrashantTukadiya如果我用

VStack

添加

HStack

和

Spacer

单元格将不会变为全宽。在Building Custom Views talk上，苹果工程师解释了尺寸调整的工作原理。从这里我看到-

ScrollView

没有传递它的大小，而是一些

ScrollViewContent

大小（它不是一个实际的名称）小于

ScrollView

本身。将

ScrollView

替换为另一个视图可以解决问题，但我失去了滚动功能。

var body: some View {
    TileList(data: 0...3) { index in
        HStack {
            Text("Hello world")
            Text("#\(index)")
         }
    }
}