ios - ScrollView 内的 ForEach 不占用整个宽度

Question

我正在尝试使用 SwiftUI 重新创建我当前应用程序的用户界面。而且这比我最初要困难得多。我想实现像卡片一样的细胞，背后有一些背景。我发现 List 不支持，至少现在是这样。 List 非常有限 - 它不允许您删除单元格分隔符。

所以我移动到 ScrollView 内的 ForEach。我想这不是应该在长 table 生产中使用的东西，但现在应该可以使用。我遇到的问题是 ForeEach View 没有占用 ScrollView 提供的所有宽度。我可以设置 .frame(...) 修饰符，但这需要我绝对不想做的硬编码宽度。

有什么想法可以强制 VStack 占据 ScrollView 的整个宽度吗？我尝试在没有 VStack 的情况下使用 ForeEach 并且它有同样的问题。似乎 ScrollView(父 View )“告诉”它的 subview (VStack) 它的框架小于实际 ScrollView 的框架。并基于该信息， subview 构建它们的布局和大小。

这是我目前的结果:

代码如下:

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 和内容 View width，以便您添加的每个 subview 内容 View 内部将居中。

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

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

默认情况下它采用屏幕宽度 (UIScreen.main.bounds.width)。

它就像一个 List View 一样工作:

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