【Flutter】シンプルメモ帳作ろう1~ListViewでコンテンツの一覧表示
モバイルアプリ開発の定番のリスト表示に使用するListViewに関してです。
任意のオブジェクトを参照しListViewでコンテンツの一覧表示を行います。
メモ帳で言うところの記事の一覧(articles)として利用します。
■ソースコード(一部抜粋)
リスト化したいオブジェクト(今回の場合は記事一覧(articles))を、
ListViewにその配列の要素数を渡し★1、itemBuilder内で繰り返される処理の中でオブジェクトの属性を参照する★2
// オブジェクト配列でカード表示を行う
ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
// ★1 配列のデータ数分カード表示を行う
itemCount: articles.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: InkWell(
onTap: () {
debugPrint("tap : " +
'${articles[index].title}');
_editArticle(articles[index]);
},
child: Column(children: <Widget>[
ListTile(
title:
// ★2 オブジェクトの属性(タイトル属性)を参照する
Text(
'${articles[index].title}',
),
subtitle: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween, // 両端に寄せる
children: <Widget>[
Text(formatStr('${articles[index].body}')),
Text(
"更新日:${articles[index].updateDate}",
style:
TextStyle(fontSize: 10))
]),
trailing: IconButton(
icon: new Icon(Icons.delete),
onPressed: () {
// 削除の確認ダイアログを表示
_confirmDeleteDialog(articles[index].id);
},
),
)
])));
}));
公式のリファレンスは下記です。
■ソースコード(全体)
↓にシンプルメモ帳アプリの全ソースコードをアップしています。