Flutter学习笔记五——ListView Widget

ListView 是经常用到的一个组件，今天来学习一下ListView Widget的基础使用方法

ListView的声明和添加列表元素

直接看个列子：

body: ListView(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.access_alarm),
                title: Text("access_alarm"),
              ),
              ListTile(
                leading: Icon(Icons.favorite_border),
                title: Text("favorite_border"),
              ),
              ListTile(
                leading: Icon(Icons.audiotrack),
                title: Text("audiotrack"),
              ),
            ],
          ),

在 ListView 的children中有一个泛型为Widget的数组，我们使用ListTile进行填充。ListTile由图标和文字组成。效果如图：

listtile.jpg

图片列表

将Image Widget替换ListTile，展示图片列表：

body: ListView(
            children: <Widget>[
              Image.network(
                  "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1410703285,758392286&fm=26&gp=0.jpg"),
              Image.network(
                  "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=34508247,2558360115&fm=26&gp=0.jpg"),
              Image.network(
                  "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3005852630,904785793&fm=26&gp=0.jpg"),
              Image.network(
                  "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1363043333,2102014001&fm=26&gp=0.jpg"),
              Image.network(
                  "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1552013067,3995699741&fm=15&gp=0.jpg"),
            ],
          ),

效果如图：

imglist.jpg

未完待续~~~