2021-01-10に更新

FlutterのListViewを逆順にする

FlutterのListViewは逆順にすることができる。つまり、通常は上から下にアイテムを列挙するが、下から上にすることができる。具体的にはreverseをtrueに指定する。

      ListView.builder(
        reverse: true,

これの特筆する点として、単に並び順を逆にするだけではないということがあげられる。リスト自体の動きも逆になる。つまり、リストの中身を動的に追加する処理を作った場合、スクロール位置の補正が逆に行われる。

例えばLINEチャットのように下が最新で、メッセージを投稿したらその最新のメッセージを表示するようにしたい、という場合にもこの仕組みが役立つ。単にデータの並び順を逆にして通常のListViewを使うだけだとスクロール位置がおかしくなってしまったりする。特に、入力しようとした時にキーボードが現れて画面のサイズが狭くなった時にぐちゃぐちゃになってしまったりするのを防ぐことができたりする。

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント