Flutter:ListView

Flutter
スポンサーリンク

はじめに

アプリでよく使うUIの1つにListViewがあります。

これはパーツを並べて表示範囲を超えてもスクロールして見ることができるUIです。

色々なパーツを並べることができて、かつListViewの要素を生成するためのメソッドも用意されているため、大量のアイテムを自動で生成する時などには特に必要となってくるUIです。

 

今回はそのListViewの基本的な使い方を紹介します。

 

ListView

ListViewで主に使用するプロパティは

  • scrollDirection:ListViewの並ぶ方向(縦または横)
  • padding:ListView全体の周りに入る余白
  • shrinkWrap:Listの大きさを自動で調節するかどうかを決める

の3つで、さらに細かい設定もできますが少し難しいのでまた今度、、、

 

あとはchildrenでListViewの要素を設定すれば完了です。要素には様々なウィジェットが使用できるので試して見てください。

 

scrollDirection

要素の並ぶ方向を決めます。

指定の仕方は縦方向が

です。デフォルトではこちらになっているのでわざわざ書く必要はありません。

横方向が

で指定することができます。

 

padding

ListView全体周りの余白を指定します。

ここで注意すべきなのはListViewの要素どうしの余白ではないということです。

(もしそのような余白が欲しい場合はContainerクラスでpaddingを設定すれば良いでしょう。)

指定方法は他のウィジェットのpaddingとほとんど同じで、EdgeInsetsクラスで指定します。

 

 

shrinkWrap

これにはtrueまたはfaulseを設定しListViewの大きさを自動で調節するかどうかを選択できます。デフォルトではfaulseになっていますが、ListViewの大きさで実行エラーなどが起こった時はこれをtrueにすると解決することがあります。

 

コメント