Flutter/UI/ListView/基本
提供: 初心者エンジニアの簡易メモ
リストサンプル
枠線なし
class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { const data = [ "taro", "jiro", "saburo", ]; return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: ListView.builder( itemCount: data.length, itemBuilder: (context, int index) { return Padding( padding: EdgeInsets.all(8.0), child: Text( data[index], )); }, ), ); }
https://nzigen.com/flutter-reference/2018-04-17-list-view.html
枠線あり
class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { const data = [ "taro", "jiro", "saburo", ]; return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: ListView.builder( itemCount: data.length, itemBuilder: (context, int index) { return Card( child: Padding( child: Text(data[index],), padding: EdgeInsets.all(20.0),), ); }, ), ); } }
枠線あり、クリック可能
class _MyHomePageState extends State<MyHomePage> { void _click() { print("click"); } @override Widget build(BuildContext context) { const data = [ "taro", "jiro", "saburo", ]; return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: ListView.builder( itemCount: data.length, itemBuilder: (context, int index) { return InkWell( child: Card( child: Padding( child: Text(data[index],), padding: EdgeInsets.all(20.0),), ), onTap: _click, ); }, ), floatingActionButton: FloatingActionButton( onPressed:() {}, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }
無限リスト
itemCountを削除し、データ部分をText(index.toString())にすると無限に表示される。
指定のリスト番号に戻る
PageStorageKey(0)などを追加する。カッコ内はおそらくユニーク番号
return ListView.builder( key: PageStorageKey(1), itemCount: listdatas.length, itemBuilder: (context, int index) {