向 ScrollView 添加多个 LazyVGrid

Question

我有一个应用程序，可以按天显示缩略图集合，每一天都是它自己的LazyVGrid，并且所有日子都集中在一个VStack.

最重要的是，看起来LazyVGrid在一个单一中添加多个ScrollView 几乎可行......但事实并非如此。

它会在滚动时导致不稳定的行为，下面是一个示例：

编辑4：我想我正在取得进步。当网格的最后一行有空间时，似乎会发生这种情况，如果所有行都已满，则它似乎会按预期工作。

编辑 1 ：更改此处的代码以使用可识别的（感谢西蒙），但问题仍然存在

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                Grid(400, color: .yellow)
                Grid(300, color: .blue)
                Grid(300, color: .red)
            }
        }
    }
}

struct Item: Identifiable {
    var id: UUID = UUID()
    var num: Int
}

struct Grid: View {
    @State var items = [Item]()

    let itemsCount: Int
    let color: Color
    init(_ itemsCount: Int, color: Color) {
        self.itemsCount = itemsCount
        self.color = color
    }
    var body: some View {
        LazyVGrid(columns: [GridItem(.adaptive(minimum: 128.0, maximum: 128.0))],
                  spacing: 5
        ) {

                ForEach(items) { i in
                    Text(String(i.num))
                        .frame(width: 128, height:96)
                        .background(self.color)
                }
            }
        .onAppear {
            for i in 1...itemsCount {
                self.items.append(Item(num:i))
            }
        }
    }
}

如果您运行此代码并滚动视图，您可能会在某个时刻看到跳跃ScrollView。

在较窄的窗口中尤其明显，这使得列表更长

当然，使用单个LazyVGrid内部ScrollView不会出现问题

我尝试过调整视图的数量，结果似乎是随机的，有时它会工作一段时间，有时它会立即重现，但较窄的窗口最终总是会显示问题。

我也尝试删除VStack.

编辑 2：这是正在发生的事情的视觉效果：

编辑 3：我也可以在 iOS 上重现该问题。

编辑5：尝试修复它的极其丑陋的黑客行为。

编辑 6：完全工作的代码示例

想法是用虚拟的瓷砖填充剩余的瓷砖，乍一看似乎很容易，但LazyVGrid完全磨合却存在问题GeometryReader。

我发现了这个黑客并用它来确定需要多少额外的图块https:// Fivestars.blog/swiftui/flexible-swiftui.h​​tml

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                Grid(400, color: .yellow)
                Grid(299, color: .blue)
                Grid(299, color: .red)
            }
        }
    }
}

// This extension provides a way to run a closure every time the size changes

private struct SizePreferenceKey: PreferenceKey {
  static var defaultValue: CGFloat = 0
  static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {}
}

extension View {
  func readSize(onChange: @escaping (CGFloat) -> Void) -> some View {
    background(
      GeometryReader { geometryProxy in
        Color.clear
            .preference(key: SizePreferenceKey.self, value: geometryProxy.size.width)
      }
    )
    .onPreferenceChange(SizePreferenceKey.self, perform: onChange)
  }
}

struct Item: Identifiable {
    var id: UUID = UUID()
    var num: Int
}

struct Filler: Identifiable {
    var id: UUID = UUID()
}


struct Grid: View {
    @State var items = [Item]()
    @State var width: CGFloat = 0 // We need to store our view width in a property

    let itemsCount: Int
    let color: Color
    let hSpacing = CGFloat(5) // We are going to store horizontal spacing in a property to use it in different places
    init(_ itemsCount: Int, color: Color) {
        self.itemsCount = itemsCount
        self.color = color
    }
    var body: some View {
        // The sole purpose of this is to update `width` state
        GeometryReader { geometryProxy in
            Color.clear.readSize(onChange: { s in
                self.width = s
            })
        }
        
        // LazyVGrid start
        LazyVGrid(columns: [GridItem(.adaptive(minimum: 128.0, maximum: 128.0),spacing: hSpacing)], spacing: 5) {
            ForEach(items) { i in
                Text(String(i.num))
                    .frame(width: 128, height:96)
                    .background(self.color)
            }
    
            // Magic happens here, add Filler tiles

            ForEach(self.fillers(items.count)) { i in
                 Rectangle()
                     .size(CGSize(width: 128, height: 96))
                     .fill(Color.gray)
            }
        }
        .onAppear {
            for i in 1...itemsCount {
                self.items.append(Item(num:i))
            }
        }
    }

    // And the last part, `fillers()` returns how many dummy tiles
    // are needed to fill the gap  

    func fillers(_ total: Int) -> [Filler] {
        guard width > 0 else {
            return []
        }
        var result = [Filler]()

        var columnsf = CGFloat(0)
        
        while (columnsf * 128) + (columnsf - 1) * hSpacing <= width {
            columnsf = columnsf+1
        }
        
        let columns = Int(columnsf - 1)
        
        //let columns = Int(floor((width - hSpacing) / (128 + hSpacing)))
        
        let lastRowTiles = CGFloat(total).truncatingRemainder(dividingBy: CGFloat(columns))
        
        let c = columns - Int(lastRowTiles)
                
        if (lastRowTiles > 1) {
            for _ in 0..<c {
                result.append(Filler())
            }
        }
        return result
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这可能是我做过的最丑陋的黑客之一，我只是将其发布在这里，以供那些在这个页面上绊倒的人，他们比我更聪明，可以实现更好的东西。

Answer 1

您的网格很懒，因此不会一次加载所有项目。foreach 中的 ID 不是唯一的，并且与 Grid 中之前的整数冲突。构建类似可识别结构的东西

    struct SwView: View {
        var body: some View {
       
            ScrollView {
                Grid(100, color: .yellow)
                Grid(200, color: .blue)
                Grid(200, color: .red)
            }
            
    }
}

struct Item: Identifiable {
    var id: UUID = UUID()
    var num: Int
}

struct Grid: View {
    
    @State var items: [Item] = []
    var color: Color = .white
    let itemsCount: Int
    init(_ itemsCount: Int, color: Color) {
        self.itemsCount = itemsCount
        self.color = color
    }
    
    
    var body: some View {
        LazyVGrid(columns: [GridItem(.adaptive(minimum: 128.0, maximum: 128.0))],
                  spacing: 5
        ) {

                ForEach(items) { i in
                    Text(String(i.num))
                        .frame(width: 128, height:96)
                        .background(color)
                }
            }
        .onAppear() {
            for i in 1...itemsCount {
                self.items.append(Item(num: i))
            }
            print(items.count)
        }
    }
}