ScrollView无法与GeometryReader一起正常工作

Question

我对scrollview和GeometryReader有一些问题。我想要一张图片下的物品清单。每个项目都应该有以下宽度和高度：
（（整个屏幕的宽度-前导填充-尾随填充）/2）

我为我的用例尝试了两种方法。这是我的第一个代码结构：

ScrollView
   - VStack
      - Image
      - GeometryReader
         - ForEach
            - Text

我正在使用几何体读取器来获取VStack的宽度，因为它有一个填充，我不想获得滚动视图的全宽。

但对于GeometryReader，UI上只显示ForEach循环中的最后一项。而GeometryReader只有很小的高度。见截图。

import SwiftUI

struct Item: Identifiable {
    var id = UUID().uuidString
    var value: String
}

struct ContentView: View {

    func items() -> [Item] {
        var items = [Item]()
        for i in 0..<100 {
            items.append(Item(value: "Item #\(i)"))
        }
        return items
    }

    var body: some View {
        ScrollView {
            VStack {
                Image(systemName: "circle.fill")
                    .resizable()
                    .scaledToFill()
                    .frame(width: 150, height: 150)
                    .padding()
                    .foregroundColor(.green)

                GeometryReader { geometry in
                    ForEach(self.items()) { item in
                        Text(item.value)
                            .frame(width: geometry.size.width / CGFloat(2), height: geometry.size.width / CGFloat(2))
                            .background(Color.red)
                    }
                }
                .background(Color.blue)
            }
            .frame(maxWidth: .infinity)
            .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

红色是ForEach循环中的项目。蓝色是GeometryReader，绿色只是图像。

ScrollView
   -GeometryReader
      - VStack
         - Image
         - ForEach
            -Text

然后，我的ForEach循环中的项目被正确呈现，但不能再滚动了。

import SwiftUI

struct Item: Identifiable {
    var id = UUID().uuidString
    var value: String
}

struct ContentView: View {

    func items() -> [Item] {
        var items = [Item]()
        for i in 0..<100 {
            items.append(Item(value: "Item #\(i)"))
        }
        return items
    }

    var body: some View {
        ScrollView {
            GeometryReader { geometry in
                VStack {
                    Image(systemName: "circle.fill")
                        .resizable()
                        .scaledToFill()
                        .frame(width: 150, height: 150)
                        .padding()
                        .foregroundColor(.green)

                    ForEach(self.items()) { item in
                        Text(item.value)
                            .frame(width: geometry.size.width / CGFloat(2), height: geometry.size.width / CGFloat(2))
                            .background(Color.red)
                    }
                }
                .frame(maxWidth: .infinity)
            }
            .padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

如何存档以正确显示UI。我是不是错过了什么

我非常感谢您的帮助<谢谢。

我找到了一个解决办法，可以用一个工作的滚动视图正确地呈现UI，但在我看来，这很有问题
我正在使用PreferenceKey来解决这个问题

我正在scrollview中使用高度为0的geometryReader。只是为了得到我的VStack的宽度。在preferenceKeyChange上，我正在更新一个状态变量，并使用它为我的项目设置宽度和高度。

import SwiftUI

struct Item: Identifiable {
    var id = UUID().uuidString
    var value: String
}

struct ContentView: View {
    @State var width: CGFloat = 0

    func items() -> [Item] {
        var items = [Item]()
        for i in 0..<100 {
            items.append(Item(value: "Item #\(i)"))
        }
        return items
    }

    struct WidthPreferenceKey: PreferenceKey {
        typealias Value = [CGFloat]

        static var defaultValue: [CGFloat] = [0]

        static func reduce(value: inout [CGFloat], nextValue: () -> [CGFloat]) {
            value.append(contentsOf: nextValue())
        }
    }

    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                Image(systemName: "circle.fill")
                    .resizable()
                    .scaledToFill()
                    .frame(width: 150, height: 150)
                    .padding()
                    .foregroundColor(.green)

                GeometryReader { geometry in
                    VStack {
                        EmptyView()

                    }.preference(key: WidthPreferenceKey.self, value: [geometry.size.width])
                }
                .frame(height: 0)

                ForEach(self.items()) { item in
                    Text(item.value)
                        .frame(width: self.width / CGFloat(2), height: self.width / CGFloat(2))
                        .background(Color.red)
                }
            }
            .padding()
        }
        .onPreferenceChange(WidthPreferenceKey.self) { value in
            self.width = value[0]
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这是唯一的方法，还是有更优雅、更简单的方法？

Answer 1

首先，由于您使用的是VStack，这意味着您需要进行垂直滚动。因此，需要设置maxHeight属性，而不是maxWidth。

在您的第一种方法中，您正在将for...循环包装在GeometryReader中，然后再将其包装在VStack中。因此，SwiftUI直到构建GeometryReader及其子级之前才会识别出您希望将这些项目放在垂直堆栈中。因此，一个好的解决方法是将GeometryReader作为scrollView之前的第一个块以使其工作：

import SwiftUI

struct Item: Identifiable {
    var id = UUID().uuidString
    var value: String
}

struct ContentView: View {

    func items() -> [Item] {
        var items = [Item]()
        for i in 0..<100 {
            items.append(Item(value: "Item #\(i)"))
        }
        return items
    }

    var body: some View {
        GeometryReader { geometry in
        ScrollView {
            VStack {

                Image(systemName: "circle.fill")
                    .resizable()
                    .scaledToFill()
                    .frame(width: 150, height: 150)
                    .padding()
                    .foregroundColor(.green)

                    ForEach(self.items()) { item in
                        Text(item.value)
                            .frame(width: geometry.size.width / CGFloat(2), height: geometry.size.width / CGFloat(2))
                            .background(Color.red)
                    }
            }
            .frame(maxHeight: .infinity)
            .padding()
        }
        }
        .background(Color.blue)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

第二种方法的问题是，将无限高VStack包装在GeometryReader中，它不一定具有无限高。此外，GeometryReader是一个快速的UI块，用于从外部块读取尺寸，而不是从其子块获取尺寸。

一般来说，如果要使用正在制作的当前主要SwiftUI组件的几何图形（或者设备屏幕，如果是全屏组件），请将GeometryReader置于其他组件的父级。否则，需要将GeometryReader组件作为定义良好的维度SwiftUI块的唯一子级。

已编辑：要添加填充，只需在滚动视图中添加所需的填充：

ScrollView{
  //...
}
.padding([.leading,.trailing],geometry.size.width / 8)

或者只在一个方向：

ScrollView{
  //...
}
.padding(leading,geometry.size.width / 8) // or any other value, e.g. : 30

如果只需要为for循环中的项目添加填充，只需将for循环放在另一个VStack中，并在上面添加填充即可。