Flutter 页面布局 ListView图文列表布局、左右滑动的水平列表

Flutter中我们可以通过 ListView 来定义列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。

列表有以下分类：

1、垂直列表

2、垂直图文列表

3、水平列表

4、动态列表

ListView参数列表

名称	类型	说明
scrollDirection	Axis	Axis.horizontal 水平列 Axis.vertical 垂直列表(默认)
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件反向排序
children	List< Widget>	列表元素

基本列表

对于ListTile组件我的理解是相当于我们以前Java Android时列表中的单个条目，不过Flutter已经帮我们封装好了。

条目中有以下几个常用属性:


    this.leading,   //放在条目前面（左边）的图片
    this.title,     //条目的主标题
    this.subtitle,  //条目的副标题
    this.trailing,  //放在条目后面（右边）的图片

children: < Widget>[ …]中返回的的是一个组件集合，里面包含多个组件，每个子组件就相当于我们列表中的一个条目，常与ListTile组件结合显示类似新闻列表

垂直列表


Widget build(BuildContext context) {
    return ListView(
      children: [
        Image.network("https://mall.flutterschool.cn/images/xhs/1.png"),
        const SizedBox(
          height: 50,
          child: Text(
            "我是一个CAR",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          ),
        ),
        Image.network("https://mall.flutterschool.cn/images/xhs/2.png"),
        const SizedBox(
          height: 50,
          child: Text(
            "我是一个CAR",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          ),
        ),
        Image.network("https://mall.flutterschool.cn/images/xhs/3.png"),
        const SizedBox(
          height: 50,
          child: Text(
            "我是一个CAR",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          ),
        ),
        Image.network("https://mall.flutterschool.cn/images/xhs/4.png"),
        const SizedBox(
          height: 50,
          child: Text(
            "我是一个CAR",
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          ),
        )
      ],
    );
  }

垂直图文列表


Widget build(BuildContext context) {
    return ListView(
      padding:const EdgeInsets.all(10),
      children: [
        ListTile(
          leading:
              Image.network("https://mall.flutterschool.cn/images/xhs/1.png"),
          title: const Text("这地方被通报批评，地铁狂飙时代落幕"),
        ),
       const Divider(),
       ListTile(
          leading:
              Image.network("https://mall.flutterschool.cn/images/xhs/2.png"),
          title: const Text("“中东土豪注资是假的”，高合汽车多手段逼员工辞职：调岗，拖欠补贴"),
        ),
       const Divider(),
       ListTile(
          leading:
              Image.network("https://mall.flutterschool.cn/images/xhs/3.png"),
          title: const Text("逼员工辞职：调岗，拖欠补贴"),
          subtitle: const Text("中东土豪注资是假的中东土豪注资是假的"),
        ),
       const Divider(),
       ListTile(
          title: const Text("逼员工辞职：调岗，拖欠补贴"),
          subtitle: const Text("中东土豪注资是假的中东土豪注资是假的"),
          trailing: Image.network("https://mall.flutterschool.cn/images/xhs/4.png"),
        ),
       const Divider(),
      ],
    );
  }

Flutter页面布局ListView图文列表详解

水平图文列表可以左右滑动

我们在listview外部又加了一个Container，原因是当我们设置方向为水平时，条目中高度属性会失效，默认为对齐父组件，因此我们在listview外部又加了一个Container，然后指定高度，这样listview高度就被限制。同样的在垂直方向时listview内部条目默认宽度于父布局一致，设置宽度无效。

这里listview里面用的是container组件展示每个条目


Widget build(BuildContext context) {
    return Container(
      height: 180,
      child: ListView(
        scrollDirection: Axis.horizontal,  //水平方向
        children: [
          Container(
            width: 120,
            decoration:const BoxDecoration(
              color: Colors.yellow
            ),
            child: Column(
              children: [
                Container(
                  height: 120,
                  margin:const EdgeInsets.only(bottom: 6,right: 10),
                  child: Image.network("https://mall.flutterschool.cn/images/xhs/1.png",fit: BoxFit.cover,),
                ),
               const Text("我是一个car")
              ],
            ),
          ),
          Container(
            width: 120,
            decoration:const BoxDecoration(
              color: Colors.red
            ),
            child: Column(
              children: [
                Container(
                  height: 120,
                  margin:const EdgeInsets.only(bottom: 6,right: 10),
                  child: Image.network("https://mall.flutterschool.cn/images/xhs/2.png",fit: BoxFit.cover,),
                ),
               const Text("我是一个car")
              ],
            ),
          ),
          Container(
            width: 120,
            decoration:const BoxDecoration(
              color: Colors.blue
            ),
            child: Column(
              children: [
                Container(
                  height: 120,
                  margin:const EdgeInsets.only(bottom: 6,right: 10),
                  child: Image.network("https://mall.flutterschool.cn/images/xhs/3.png",fit: BoxFit.cover,),
                ),
               const Text("我是一个car")
              ],
            ),
          ),
          Container(
            width: 120,
            decoration:const BoxDecoration(
              color: Colors.green
            ),
            child: Column(
              children: [
                Container(
                  height: 120,
                  margin:const EdgeInsets.only(bottom: 6,right: 10),
                  child: Image.network("https://mall.flutterschool.cn/images/xhs/4.png",fit: BoxFit.cover,),
                ),
               const Text("我是一个car")
              ],
            ),
          ),
          Container(
            width: 120,
            decoration:const BoxDecoration(
              color: Colors.yellow
            ),
            child: Column(
              children: [
                Container(
                  height: 120,
                  margin:const EdgeInsets.only(bottom: 6,right: 10),
                  child: Image.network("https://mall.flutterschool.cn/images/xhs/5.png",fit: BoxFit.cover,),
                ),
               const Text("我是一个car")
              ],
            ),
          )
        ],
      ),
    );
  }

Flutter页面布局ListView图文列表详解

动态列表

● 通常我们不会使用过多的静态列表，后台加载数据

● 通常会使用动态列表通过ListView.builder构建

● itemCount 指定列表明细数量

● itemBuilder 构建明细的样式与数据绑定


Widget build(BuildContext context) {
    // ListView.builder有两个必须要传的参数itemCount和itemBuilder
    // 前者传的是个数，后者传的是 组件
    return ListView.builder(
        itemCount: carData.length,
        itemBuilder: (context, int index) {
          print(index);
          return Column(
            children: [
              Image.network("${carData[index]["picurl"]}"),
              SizedBox(
                height: 50,
                child: Text(
                  carData[index]["title"],
                  textAlign: TextAlign.center,
                  style: const TextStyle(fontSize: 20),
                ),
              ),
            ],
          );
        });
  }

Flutter页面布局ListView图文列表详解

Flutter 页面布局 ListView图文列表布局、左右滑动的水平列表

ListView参数列表

基本列表

条目中有以下几个常用属性:

垂直列表

垂直图文列表

水平图文列表 可以左右滑动

这里listview里面用的是container组件展示每个条目

动态列表

水平图文列表可以左右滑动