Flutter/UI/ListView/基本
提供: 初心者エンジニアの簡易メモ
2019年5月7日 (火) 01:28時点におけるAdmin (トーク | 投稿記録)による版 (Admin がページ「Flutter/ListView/基本」を「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),
),
);
}
}
