Flutter ver 0.3.2 の、無限スクロールする GridView のサンプル
『The Infinite ListView』等で Google 検索すると無限スクロールする ListView については情報がえられるのですが、同じようなことを GridView でやっているサンプルは見つからなかったので書いておきます。言うならば、The Infinite GridView のサンプルです。Flutter は ver 0.3.2 を利用しています。無限スクロールに関しては、やっていることは無限スクロール ListView と同じです。なので GridView のサンプルではありますが、同じ方法論で無限スクロール ListView も作ることができます。機能としては、以下を実装しています。
・GridView を末尾までスクロールすると、次のデータを新たに作成して追加表示する
・GridView の要素は、表示されるタイミングで構築(遅延構築)される
・GridView の要素は 1 列で 3 個ずつ並べられる
以下がサンプルコードになります。
import 'package:flutter/material.dart'; void main() => runApp(new InfiniteGridViewSampleWidget()); /// 無限にスクロールする GridView サンプルの StatefulWidget class InfiniteGridViewSampleWidget extends StatefulWidget { @override InfiniteGridViewSampleState createState() => new InfiniteGridViewSampleState(); } /// 無限にスクロールする GridView サンプルの State class InfiniteGridViewSampleState extends State<InfiniteGridViewSampleWidget> { // 表示するデータの List。 // 初期値としてデータを 20 件いれておく。 final List<int> items = new List.generate(20, (index) => index); // GridView を構築して返す。 // この GridView を末尾までスクロールした場合、表示するデータ件数を増やして追加表示できるようにする。 // // GridView が末尾までスクロールされたかは、GridView に設定した ScrollController によって検知できる。 // // GridView に表示される要素の最大数は、GridView が構築された時点で固定される。 // そのため、表示するデータ件数を増やすには、再度 GridView を再構築する必要がある。 @override Widget build(BuildContext context) { // GridView のスクロールを検知するための ScrollController。 final ScrollController _scrollController = new ScrollController(); // ScrollController にイベントリスナーを設定する。 _scrollController.addListener(() { // 最後までスクロールしたら、次のデータを読み込む。 if (_scrollController.position.maxScrollExtent <= _scrollController.position.pixels) { // 表示するデータを追加し、ウィジェットを再構築するよう通知する。 setState(() { // 表示するデータにさらに 20 件データを追加する。 this.items.addAll( new List.generate(20, (index) => this.items.length + index)); }); } }); // GridView の要素を表示されるタイミングで構築できるように itemBuilder を指定する。 return new MaterialApp( home: new Scaffold( // itemBuilder を指定できる GridView.builder() で GridView を構築する。 body: GridView.builder( itemBuilder: (BuildContext context, int index) { // itemBuilder は、引数 index の位置にある GridView の要素が表示されるタイミングで // 呼び出され、その要素を構築して返す。 print("make item: ${index}"); // 引数 index の位置にある GridView の要素を構築して返す。 return new Center(child: new Text("#${index}")); }, // GridView で表示するデータの件数を設定する。 // これ以上の件数のデータを表示する場合、新たな itemCount 値を設定して GridView を再構築する必要がある。 itemCount: items.length, // スクロールされたことを検知するため、ScrollController を設定する。 controller: _scrollController, // GridView の要素は横に 3 個ずつ並べてレイアウトする。 // これは、new GridView.count(crossAxisCount: 3, children: <Widget>[]) に相当する。 // GridView の要素の配置は SliverGridDelegateWithFixedCrossAxisCount を設定することで指定できる。 gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, ), ), ), ); } }
続きを読む Flutter, Dart コメント (0) 2018/05/17 19:11:40