技術記事

micomia株式会社の畑井です。
今回は投稿表示画面やユーザー一覧画面を作成する際に欠かせないListViewというWidgetについて解説していきます。

1.ListViewのスクロールについて

ListViewは画像のように利用します。
今回はColumnの下に入れています。
このような使い方をする場合はスクロールできないという問題が発生しがちですので下の画像のように設定してみてください。

Columnの下にListViewを入れる場合はまずはColumnをScrollableにしてください。

そしてListViewのPrimaryをOFFにしてください。
PrimaryをONにするとColumnもスクロールでPrimaryになっているため両方ともスクロールが優先されてしまいうまくスクロールができません。

2.ListViewにデータをセットする方法

ListViewにデータをセットする方法を説明していきます。
データベースはFirebaseのFirestoreを利用しています。

Query Collectionで今回はusersをセットします。
Filterで表示する内容を絞ったり、Orderingで並び替えたりすることができます。

「Confirm」を押してください。

このように表示されますが、「Confirm」を押してください。

このように薄く表示されていればListViewを使えています。

次に隣のこちらを利用していきます。

こちらは変数からListに表示する内容を入れることができるものです。
例えば検索した結果をドキュメントのListで受け取ってそれを表示するなど、ListViewに表示させる内容を変数から取得できる機能です。

3.その他メニュー

Axis・・・スクロールを縦でするか横でするか選べます。Verticalが縦スクロールで、Horizontalが横スクロールですが、Horizontalは多くの場合クラッシュしてしまうのでRowをスクロールできるように実装するのがおすすめです。

Item Spacing・・・ここの数字を入れると表示しているアイテムとアイテムの間にスペースを入れることができます。「Apply to Start & End」を押すと入力したスペースがアイテムの先頭と末尾にも入ります。

Shrink Wrap・・・アイテムの高さに合わせて動的にリストを生成するものです。

Primary・・・ONにすると優先スクロールとなります。

Reverse・・・並んでいるアイテムの順番を上下逆にします。

Reorderble・・・ONにすると並び替え可能な状態になります。

4.まとめ

今回はListViewについて解説しました。
ListView自体は簡単ですがスクロールできないという問題が発生することが多いため本記事を参考にスクロールできないなど基本的な不具合はなくせるようにしましょう。

動画でもっと知りたい方はこちら