今回は、ListView について紹介します！
ListView は、スクロール可能なリストを表示するための Widget です。画面に ListView の項目が収まらない場合はスクロールできます。
基本の使い方
以下のように、children にリスト表示する Widget を指定します。
ListView(
children: [
Text("List Item 1"),
Text("List Item 2"),
Text("List Item 3"),
],
),ListView の種類
ListView の種類には、以下の 4 種類があります。
- ListView
- ListView.buider
- ListView.separated
- ListView.custom
ListView
ListView は、通常のスクロール可能なリストを構築する Widget です。
使い方は、上記の「基本の使い方」で説明した通りです。
ListView.builder
ListView.builder は、効率的にリストを構築するための Widget です。リストに大量の項目を表示する際に有効です。
itemCount に生成する項目の数を指定します。このプロパティを記述しない場合は表示するリストの項目は無限になります。
itemBuilder で、リスト表示する Widget を生成します。
ListView.builder(
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return Text("List Item ${index + 1}");
},
),ListView.separated
ListView.separated は、区切り線を付け加えたリストを構築するための Widget です。
基本的な使い方は、上記の ListView.builder と同様です。
separatorBuilder で区切り線の設定を行います。
ListView.separated(
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return Text("List Item ${index + 1}");
},
separatorBuilder: (BuildContext context, int index) => const Divider(),
),ListView.custom
ListView.custom は、高度なカスタマイズが可能なリストを構築するための Widget です。
特殊なリストを作成する必要がなければ、ListView.builder で十分でしょう。
childrenDelegate でリスト表示する Widget を指定し、childCount でリストの項目数を指定します。
ListView.custom(
childrenDelegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Text("List Item ${index+1}");
);
},
childCount: 3,
),
),まとめ
スクロール可能なリストを表示する ListView の使い方について紹介しました！
- ListView で画面に項目が収まらない場合はスクロール可能になる
- ListView に以下の 4 種類がある
- ListView：通常のスクロール可能なリスト
- ListView.builder：大量の項目を効率よく表示可能なリスト
- ListView.separated：区切り線付きのリスト
- ListView.custom：高度なカスタマイズが可能なリスト
以上で、【Flutter】スクロール可能なリストを表示する ListView の使い方 は終わりです。
コメント