Flutterでは、リスト表現のためListView.builderが使われます。
私自身もよく使うのですが、どのような使い方ができるのか詳しく知りませんでした。
今回はListView.builderでどのような使い方ができるのかご紹介します。
基本的なListView.builderの使い方
まずは、ListView.builderの基本的な実装です。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ListView.builder with All Properties'),
),
body: MyListView(),
),
);
}
}
class MyListView extends StatelessWidget {
// リストアイテムの作成
final List<String> items = List<String>.generate(20, (i) => "Item $i");
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length, // リストのアイテム数を指定
// リストに表示するアイテムを表現
itemBuilder: (context, index) {
return ListTile(
title: Text('${items[index]}'),
);
},
scrollDirection: Axis.vertical, // スクロール方向を垂直に設定
reverse: false, // 順序を逆にしない
padding: EdgeInsets.all(8.0), // リスト全体に8ピクセルの余白を追加
primary: true, // このリストがプライマリスクロールビューかどうかを指定
shrinkWrap: false, // リストの高さをその内容に基づいて調整しない
physics: BouncingScrollPhysics(), // スクロール挙動を指定
addAutomaticKeepAlives: true, // 各アイテムが自動的に保持されるかどうかを指定
addRepaintBoundaries: true, // 各アイテムが再描画境界を持つかどうかを指定
addSemanticIndexes: true, // 各アイテムがセマンティックインデックスを持つかどうかを指定
);
}
}
このコードでは、ListView.builderを使用して、２０個のリストアイテムを表示しています。
ListView.builderのプロパティ
ListView.builderには様々なプロパティが容易されています。
itemCount（任意）
itemCountはリストのアイテム数を指定するプロパティです。
itemCountプロパティは必須ではありませんが、設定すると、
リストのアイテム数が明示的に決まり、リストのパフォーマンスが向上するみたいです。
itemBuilder（必須）
itemBuilderは各アイテムを生成するプロパティです。
受け取ったリストアイテムを１つずつ処理して表示されるウィジェットを返します。
scrollDirection（任意）
scrollDirectionはリストのスクロール方向を指定します。
垂直方向（Axis.vertical）、水平方向（Axis.horizontal）に設定することができます。
デフォルトでは垂直方向（Axis.vertical）です。
reverse（任意）
reverseはリストの順序を逆にするかどうかを指定します。
trueに設定すると、リストの表示順序が逆になります。デフォルトはfalseです。
padding（任意）
paddingはリスト全体の内側の余白を指定します。
こちらは他のWidgetでもよく登場するプロパティですが、
例えば、EdgeInsets.all(8.0)とすると、リストの四方に8ピクセルの余白ができます。
primary（任意）
primaryは、例えば入れ子のスクロールビューの場合に、
どのビューを優先してスクロールするか設定できます。
trueに設定すると、このリストが優先してスクロールされます。デフォルトはtrueです。
shrinkWrap（任意）
shrinkWrapはリストが必要なだけのサイズを取るかどうかを指定します。
trueに設定すると、リストはその内容に基づいて自身の高さを決定します。
デフォルトはfalseです。
physics
リストのスクロール挙動を指定します。
BouncingScrollPhysicsやClampingScrollPhysicsがあります。
デフォルトはBouncingScrollPhysicsです。
説明が難しいので、実際に実装して比べてみることをおすすめします。
addAutomaticKeepAlives（任意）
各アイテムが自動的に保持されるかどうかを指定します。
画面上に描写されていないリストアイテムもメモリに保持するため、
スクロールがスムーズになりますが、数が多いとパフォーマンスが悪くなります。
デフォルトはtrueです。
addRepaintBoundaries（任意）
アイテムが再描画境界を持つかどうかを指定します。
trueでは、変更があった場合そのアイテムだけ再描写されます。
falseでは、変更があった場合、リスト全体が再描写されます。
デフォルトはtrueです。
addSemanticIndexes（任意）
各アイテムがセマンティックインデックスを持つかどうかを指定します。
セマンティックインデックスとは、スクリーンリーダー（読み上げ機能）や
他のアクセシビリティツールがリストアイテムの順序や位置を正確に読み上げることが
できるようになるためのインデックスです。
デフォルトはtrueです。
まとめ
“itemCount”と”itemBuilder”しか使ったことがありませんでしたが、
調べてみると、色々なプロパティが存在しました。
“scrollDirection”や”shrinkWrap”などは、使える場面がありそうですね。
他にも、Flutterでは便利なリストウィジェットがあるので今後、紹介したいと思います。