Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter List View 概要

najeira
May 31, 2018

Flutter List View 概要

najeira

May 31, 2018
Tweet

More Decks by najeira

Other Decks in Technology

Transcript

  1. Column new Column( children: <Widget>[ new ListTile( leading: new Icon(Icons.map),

    title: new Text('Map'), ), ... ], ), Flutter List View 4
  2. ListView new ListView( children: <Widget>[ new ListTile( leading: new Icon(Icons.map),

    title: new Text('Map'), ), ... ], ), ※child は ListTile でなくとも何でもよい Flutter List View 6
  3. 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
  4. 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
  5. Sliver 日本語だと「 小片」 とか「 細片」 とか「 一部」? ListView やGridView より、

    いろいろ出来る 低レイヤの機能 ListView やGridView も内部ではSliver を使っている Flutter List View 15
  6. 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
  7. 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
  8. 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