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) {
