Flutter:ListView.builder(List自動生成)

Flutter
スポンサーリンク

はじめに

前回ListViewの基本的な使い方と、List項目を作るのに便利なListTileを紹介しました。

Flutter:ListView
はじめに アプリでよく使うUIの1つにListViewがあります。 これはパーツを並べて表示範囲を超えてもスクロールして見ることができるUIです。 色々なパーツを並べることができて、かつListViewの要素を生成するためのメ...
Flutter:ListTile
はじめに ListViewの基本に関しては以前触れましたが、今回はそのListViewの要素として非常に便利に使えるListTileについて紹介したいと思います。 ListTile まずListTileとは、 L...

 

ListTileを紹介した時に使用したサンプルコードでは、同じようなListTileを表示させる分だけ書く必要があり、そこで単純なListTileは自動で生成させることができることにも触れました。

 

今回は具体的にどのように自動生成を実装するのかを紹介していきます。

 

List自動生成

.builder

ListViewを自動生成する場合、ListViewの.builderというコンストラクタを使います。

コンストラクタはクラスのインスタンスの初期値を決めるのに使われます。

 

公式ドキュメントを見てもわかる通り.builderコンストラクタを指定するとインスタンスの中身が変わることがわかります。

 

主に使うプロパティはListViewの時と同じで大丈夫なのですが、

ListViewの時と1つ違うのが”itemBuilder”プロパティに必ずList生成の関数を設定しなければならないことです。

 

“itemBuilder”の指定のしかたは

と表されます。

 

引数のiはList項目のインデックスで、returnで返される要素に0.1.2.3…とついていきます。

 

Divider()

今まで紹介してきたListViewは項目と項目の間に仕切り線がありませんでした。

Divider()を使うと仕切り線を入れることができます。

 

サンプルコード

上に表示しているListViewをListView.builderを使って簡潔にかけるように修正します。

またせっかくなのでDivider()で仕切り線を入れてみます。

 

i.isOdd・・・iが奇数ならtrueを偶数ならfalseを返します。

index = i ~/ 2;・・・indexはListTileだけをみたインデックスです。iが奇数の時にDivider()を返しているので、例えば2と表示しているListTileのインデックスiは3です。~/は小数点以下切り捨ての商を返す演算です。これによって2と表示しているListTileのindexは1になります。

 

indexが7以下までしかListTileが生成されないのでindexが6の7と表示されるListTileまで表示されるようになります。

 

最後に

前回のコードと比べるとかなり短く簡単に書くことができていることがわかると思います。

また生成条件の一箇所を変更するだけでListViewの長さを自由に長くできますし、無限に生成することもできます。

 

長いListViewを作るときは必須とも言えるくらい重要なので押さえておきましょう。

コメント