動画
要約
- ListViewとGridViewはそれぞれ中のコンテンツはスクロールできるがそれ自体はスクロールできない
- ViewとGrid自体も含めてスクロールさせたいときはSliverを使おう
内容
ListViewとGridViewはその中のコンテンツを別々にスクロールさせたい場合は最適です。
しかし、もしリストやグリッドを一緒にスクロールさせたり、もっと複雑なスクロールをさせたい場合はどうしたらいいでしょうか？
そんなときには、SliverListとSliverGridを使いましょう。
Sliverはスクロールできる領域の一部分として扱うことができ、CustomScrollViewのひとつの要素になります。
（いくつものSliverが集まって、まとまった形でスクロールできる領域になる）
上の例では、SliverGridとSliverListが合わさって１つのスクロール領域になる
Sliverはchildrenの数が多い場合にスムーズにスクロールさせたいとき、特に効果的です。
なぜなら、Sliverは遅延読み込みができ、それぞれの要素が表示されるそのときにビルドができるからです。
補足：最初の表示のとき、見えていない部分も含めてすべての子供をビルドすると初期表示に時間がかかる。見えている部分だけビルドする仕組みがlazily buildである。見えている部分しか表示の処理をしないので、サクサク動く。
SliverListはdelegateパラメータを取ります。
delegeteパラメータは、スクロールされて次のitemが表示されそうになったときにそのitemをビルドするための関数を設定します。
補足：delegateは直訳すると、「委譲」です。おまかせするという意味。
Viewを作るそのときに全てのアイテムをビルドするのではなく、アイテムが表示されそうになったタイミングでそのアイテムをビルドする。そのアイテムのビルドはdelegageパラメータに指定した関数に「おまかせ」します、という意味です。
Viewを作るそのときに全てのitemをビルドしてしまうとパフォーマンスがitem数に依存し、item数が多い場合にパフォーマンスが劣化してしまいます。
表示される分だけビルドするという仕組みにより、パフォーマンスが高く保たれ、それを実現するために重要なパラメータがdelegateパラメータです。
あなたはSliverChildListDelegateを使って実際のchildrenのリストを指定できます。
あるいは、SliverChildBuilderDelegateを使って遅延的に構築することもできます。
SliverGridは、delagateにitemをビルドする関数を指定することもできますし、または明示的にリストを使ってchildrenを指定することもできます。
また、グリッドの縦軸に関してはその他にも指定するパラメータがあります。
countコンストラクタを使ってそのグリッドがいくつのitemを持っているのかを指定します。
あるいは、グリッドにいくつのitemを表示するか決定するために、extentコンストラクタを使ってitemの最大幅を指定します。
まとめ
Widget of the Weekの#12 SliverList & SliverGridの日本語翻訳版でした。
それぞれのViewがそれぞれの領域でのみスクロールよりも、Sliverのように一体となってスクロールするほうがユーザーに優れた体験を提供できる、そんなケースも多いと思います。
SliverListとSliverGridは画面のスクロールをコントロールできる素晴らしいwidgetです。
■ 次の記事はこちら
#13 – FadeInImage
■Widget of the Week まとめ
Widget of the Week 一覧