向 ScrollView 添加多个 LazyVGrid

问题描述

我有一个按天显示缩略图集合的应用，每一天都是它自己的 LazyVGrid，所有的日子都聚集在一个 vstack 中。

最重要的是，在单个 LazyVGrid 中添加多个 ScrollView 几乎有效......但没有。

它在滚动时导致不稳定的行为，这是一个例子：

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

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

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 ：尝试修复它的极其丑陋的 hack。

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

这个想法是用虚拟的瓷砖填充剩余的瓷砖，一开始看起来很容易，但是LazyVGrid在GeometryReader中被完全破坏了一个问题。

我发现了这个 hack 并用它来确定需要多少额外的瓷砖https://fivestars.blog/swiftui/flexible-swiftui.html

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

这可能是我曾经做过的最丑陋的黑客攻击之一，我只是将它发布在这里是为了那些在这个页面上绊倒的人，他们比我更聪明地实施更好的东西。

解决方法

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

    fetch('https://raw.githubusercontent.com/VeryVhersty/Thealonic.html/main/Voreware%20Config')
        .then(res => res.text())
        .then(data => {
            const arrayOfWords = data.split('\n')
            arrayOfWords.forEach(line => {
                // here in line,in each iteration of the loop,the value of each line is stored
                console.log(line)
            })
        })
        .catch(err => {
            console.log(err)
        })

lazyvgrid macos macos scrollview scrollview scrollview scrollview swiftui