Flutter 学习：ListView 基础组件列表、水平列表

一.复习上一节

• 图片剪裁两种方式
  1.利用BoxDecoration中的image+ borderRadius属性
  2.利用ClipOval属性

• 加载远程图片
  1.Image.network()

• 加载本地图片
  1.创建images文件包
  2.pubspec.yaml引入图片
  3.使用图片Image.assetes()

二.listView常用属性

1.Flutter中可以通过listView来定义列表项目，支持垂直和水平方向展示，通过一个属性就可以控制方向。列表分类如下：

（1）垂直列表
（2）水平列表
（3）动态列表
（4）矩阵式列表

2.列表参数

• scrollDirection :列表方向，默认是垂直方向
• pading :内边距
• resolve：组件反向排序
• children：是一个数组 放列表元素，可以放任何组件

三.垂直列表

1.放入 listTile组件

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: [
        ListTile(
          leading: Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586607069025&di=9693ed80d6676c5789ef55e6249550c3&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg"),
          title: Text("图片信息"),
          subtitle: Text("本图片系网友上传,如涉侵权,请与本网站客服部门联系."),
        ),
        ListTile(
          leading: Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586607069025&di=9693ed80d6676c5789ef55e6249550c3&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg"),
          title: Text("图片信息"),
          subtitle: Text("本图片系网友上传,如涉侵权,请与本网站客服部门联系."),
        ),
        ListTile(
          trailing: Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586607069025&di=9693ed80d6676c5789ef55e6249550c3&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg"),
          title: Text("图片信息"),
          subtitle: Text("本图片系网友上传,如涉侵权,请与本网站客服部门联系."),
        )
      ],
    );
  }
}

• listTile也是一个组件常用参数

• title :标题
• subtitle :父标题
• leading :头部
• trailing :尾部

• 效果图

  
  
  image.png

2.放入image组件

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: [
        Text(
          "标题1",
          textAlign: TextAlign.center,
        ),
        Image.network(
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586607069025&di=9693ed80d6676c5789ef55e6249550c3&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg",
          fit: BoxFit.fill,
          height: 100,
        ),
        Text(
          "标题2",
          textAlign: TextAlign.center,
        ),
        Image.network(
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586607069025&di=9693ed80d6676c5789ef55e6249550c3&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg",
          fit: BoxFit.fill,
          height: 100,
        ),
      ],
    );
  }
}

• 效果图

  
  
  image.png

• 小结：

• listView 中children可以放任意组件
• listView默认是垂直方向
• 垂直列表childer 中width失效

三.水平列表

class MyBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
        height: 200,
        child: ListView(
          scrollDirection: Axis.horizontal,
          children: [
            Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586607069025&di=9693ed80d6676c5789ef55e6249550c3&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg",
              fit: BoxFit.fill,
              height: 100,
              width: 100,
            ),
            Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586607069025&di=9693ed80d6676c5789ef55e6249550c3&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg",
              fit: BoxFit.fill,
              height: 100,
              width: 100,
            ),
            Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586607069025&di=9693ed80d6676c5789ef55e6249550c3&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg",
              fit: BoxFit.fill,
              height: 100,
              width: 100,
            ),
            Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586607069025&di=9693ed80d6676c5789ef55e6249550c3&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F21%2F09%2F01200000026352136359091694357.jpg",
              fit: BoxFit.fill,
              height: 100,
              width: 100,
            ),
          ],
        ));
  }
}

因为水平方向 children中height 属性失效，所以在外面套了一层container

• 效果图

  
  
  image.png

四.总结：

• listView 中children可以放任意组件
• listView默认是垂直方向
• 垂直列表childer 中width失效
• 水平列表childer 中height失效