Flutter List View 概要

Transcript

1. Flutter List View Flutter Meetup Tokyo 2018/05/29 @najeira Flutter List View 1
2. Row, Column Flutter List View 2
3. Column 縦方向のリスト ※Row は横方向 Flutter List View 3
4. Column new Column( children: <Widget>[ new ListTile( leading: new Icon(Icons.map), title: new Text('Map'), ), ... ], ), Flutter List View 4
5. ListView 単純なリスト Flutter List View 5
6. ListView new ListView( children: <Widget>[ new ListTile( leading: new Icon(Icons.map), title: new Text('Map'), ), ... ], ), ※child は ListTile でなくとも何でもよい Flutter List View 6
7. Column or ListView 画面に収まる場合はColumn スクロー ルが必要な場合はListView Flutter List View 7
8. ListView 数が多い場合は children を生成せず builder を使う new ListView.builder( itemCount: 100, itemBuilder: (BuildContext context, int index) { return new ListTile( title: new Text('$index'), ); }, ), ※ 必要になったときに itemBuilder が呼ばれるので child の生成を lazy にできる Flutter List View 8
9. GridView Flutter List View 9
10. GridView new GridView( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(cros children: <Widget>[ new Container( color: Colors.red, alignment: Alignment.center, child: new Text('red', style: style), ), ], ... ), Flutter List View 10
11. GridView デフォルトだと正方形のグリッドになる gridDelegate に渡している SliverGridDelegateWithFixedCrossAxisCount の childAspectRatio で縦横比率は変えられる Flutter List View 11
12. GridView SliverGridDelegate と SliverGridLayout を実装すれば より細かいコントロー ルが可能 Flutter List View 12
13. 独自GridView の例 Flutter List View 13
14. Sliver Flutter List View 14
15. Sliver 日本語だと「 小片」 とか「 細片」 とか「 一部」？ ListView やGridView より、 いろいろ出来る 低レイヤの機能 ListView やGridView も内部ではSliver を使っている Flutter List View 15
16. SliverList new CustomScrollView( slivers: <Widget>[ new SliverList( delegate: new SliverChildListDelegate( <Widget>[ new ListTile( leading: new Icon(Icons.map), title: new Text('Map'), ), .... ※ 最初のListView と同等のUI Flutter List View 16
17. Header 例えば見出しなど Flutter List View 17
18. Header CustomScrollView は sliver のリストを受け取る new CustomScrollView( slivers: <Widget>[ new SliverToBoxAdapter( child: new Text(" リストの見出し"), ), new SliverList( delegate: new SliverChildListDelegate( <Widget>[ new ListTile( leading: new Icon(Icons.map), title: new Text('Map'), ), .... Flutter List View 18
19. SliverAppBar new CustomScrollView( slivers: <Widget>[ new SliverAppBar( title: new Text('SliverAppBar'), floating: true, ), new SliverList( delegate: new SliverChildBuilderDelegate( (BuildContext context, int index) { return new MyRow( ... ); }, childCount: 1000, ... Flutter List View 19
20. リスト関連のWidget Column ListView GridView CustomScrollView Sliver Sliver**Delegate Flutter List View 20