6

私は、両方の方法で無限の垂直スクロールビューを求めています。上または下にスクロールすると、より多くのアイテムが動的に追加されます。私が遭遇したほとんどすべてのヘルプは、範囲が無限である下側のみに関係しています。この関連する回答に出くわしましたが、特に探しているものではありません (期間に基づいてアイテムを自動的に追加し、方向ボタンを操作してスクロールする方法を指定する必要があります)。ただし、この関連性の低い回答は非常に役に立ちました。そこでの提案に基づいて、アイテムの記録をいつでも表示できるようにし、それらがたまたま上/下から X の位置にある場合は、リストの開始/終了インデックスにアイテムを挿入できることに気付きました。

もう1つの注意点は、リストを途中から開始するようにしているため、50%上下に移動しない限り、どちらの方法でも追加する必要はありません.

明確にするために、これはユーザーがいつでも自由にスクロールできるカレンダー画面用です。

    struct TestInfinityList: View {
    
    @State var visibleItems: Set<Int> = []
    @State var items: [Int] = Array(0...20)
    
    var body: some View {
        ScrollViewReader { value in
        
            List(items, id: \.self) { item in
                VStack {
                    Text("Item \(item)")
                }.id(item)
                .onAppear {
                    self.visibleItems.insert(item)
                    
                    /// if this is the second item on the list, then time to add with a short delay
                    /// another item at the top
                    if items[1] == item {
                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.4) {
                            withAnimation(.easeIn) {
                                items.insert(items.first! - 1, at: 0)
                            }
                        }
                    }
                }
                .onDisappear {
                    self.visibleItems.remove(item)
                }
                .frame(height: 300)
            }
            .onAppear {
                value.scrollTo(10, anchor: .top)
            }
        }
    }
}

これは、小さいながらも重要な詳細を除いて、ほとんど正常に機能しています。アイテムを上から追加すると、下にスクロールする方法によっては、ビクビクすることがあります。これは、取り付けられたクリップの端に向かって最も顕著です。

ここに画像の説明を入力

4

3 に答える 3