Flutter可滚动Widgets-ListView

个人博客

ListView

先看下如下截图

以上效果图的代码，是从flutter官方demoflutter_gallery内copy的部分代码。
首先，首先定义一个列表，代码如下

List<String> items = <String>[
    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
];

然后，通过上面的定义的列表数据，现在构建ListView的子Widget数据，代码如下

Iterable<Widget> listTiles = items
    .map<Widget>((String item) => buildListTile(context, item));

Widget buildListTile(BuildContext context, String item) {
    Widget secondary = const Text(
      'Even more additional list item information appears on line three.',
    );
    return ListTile(
      isThreeLine: true,
      leading: ExcludeSemantics(child: CircleAvatar(child: Text(item))),
      title: Text('This item represents $item.'),
      subtitle: secondary,
      trailing: Icon(Icons.info, color: Theme.of(context).disabledColor),
    );
}

最后，将生成的子Widget数据填充到ListView内，代码如下

ListView(
    children: listTiles.toList(),
)

以上代码，就能完成最上面截图的效果。下面主要对ListTile做一下介绍

ListTile

ListTile是Flutter