ListView列表组件_flutter

ListView列表组件_flutter

列表布局是我们项目开发中最常用的一种布局方式。Flutter 中我们可以通过 ListView 来定义 列表项，支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。
分类： 
  1. 垂直列表 
  2. 垂直图文列表
  3. 水平列表
  4. 动态列表
  5. 矩阵式列表

列表参数

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

垂直列表(默认)

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),
      //列表子元素
      children: <Widget>[
        //可以使用任意组件,子元素一般使用ListTile
        ListTile(
          //图标
          leading: Icon(
            Icons.settings,
            size: 40,
            color: Colors.lightBlue,
          ),
          title: Text(
            //标题
            '华北黄淮高温持续 南方强降雨今起强势登场',
            style: TextStyle(fontSize: 24),
          ),
          //subtitle二级标题
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
        ListTile(
          leading: Icon(Icons.home, size: 40),
          title: Text(
            '中国13家运营波音737MAX航空公司均已提出索赔场',
            style: TextStyle(fontSize: 24),
          ),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
        ListTile(
          title: Text('华中国13家运营波音737MAX航空公司均已提出索赔登场'),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
          //后面加图标
          trailing: Icon(Icons.access_alarm),
        ),
        //图片
        ListTile(
          title: Text('华北黄淮高温雨今起强势登场'),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
        ListTile(
          leading: Image.network(
              "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2229864841,4232235061&fm=26&gp=0.jpg"),
          title: Text('华北黄淮高温持续 势登场'),
          subtitle: Text("中国天气网讯 21日开始，北方今年首轮大范围高温拉开序幕，昨天是高温发展的最鼎盛阶段"),
        ),
      ],
    );
  }
}
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),
      children: <Widget>[
        //放置不同的组件。
        Image.network("https://www.itying.com/images/flutter/1.png"),
        Container(
          child: Text(
            '我是一个标题',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),

        Image.network("https://www.itying.com/images/flutter/3.png"),
        Container(
          child: Text(
            '我是一个标题',
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
            ),
          ),
          height: 60,
          padding: EdgeInsets.fromLTRB(0, 10, 0, 10),
        ),

        Image.network("https://www.itying.com/images/flutter/1.png"),
        Image.network("https://www.itying.com/images/flutter/1.png"),
      ],
    );
  }
}

水平列表

在水平列表中高度会自动填充满,想要设置高度,要在ListView设置
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 180,
      child: ListView(
        //水平列表,在水平列表中高度会自动填充满,想要设置高度,要在ListView设置
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 180.0,           
            color: Colors.red,
          ),
          Container(
            width: 180.0,            
            color: Colors.orange,
            child: ListView(//二级列表
              children: <Widget>[
                Image.network("https://www.itying.com/images/flutter/1.png"),
                Text('我是一个文本')
              ],
            ),
          ),
          Container(          
            width: 180.0,
            color: Colors.blue,
          ),
          Container(           
            width: 180.0,
            color: Colors.deepOrange,
          ),
          Container(           
            width: 180.0,
            color: Colors.deepPurpleAccent,
          ),
        ],
      ),
    );
  }
}

动态列表（动态循环数据）

在lib中创建一个res文件夹,创建一个dart文件,放置静态list
  List listData=[
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/1.png',
      },
       {
          "title": 'Childhood in a picture',
          "author": 'Google',
          "imageUrl": 'https://www.itying.com/images/flutter/2.png',
      },
      {
          "title": 'Alibaba Shop',
          "author": 'Alibaba',
          "imageUrl": 'https://www.itying.com/images/flutter/3.png',
      },
      {
          "title": 'Candy Shop',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/4.png',
      },
       {
          "title": 'Tornado',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/5.png',
      },
      {
          "title": 'Undo',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/6.png',
      },
      {
          "title": 'white-dragon',
          "author": 'Mohamed Chahin',
          "imageUrl": 'https://www.itying.com/images/flutter/7.png',
      }      

  ];
在main中引入,显示

方法1:children

class HomeContent extends StatelessWidget {
  //自定义方法,显示动态列表
  List<Widget> _getListData() {
    var list=listData.map((value){//map返回的是(),不是list
        return ListTile(
          title:Text(value["title"]),
          leading: Image.network(value["imageUrl"]),
          subtitle: Text(value["author"])
        );
    });
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: this._getListData(),
    );
  }
}

方法2:builder

class HomeContent extends StatelessWidget {
  //自定义方法,显示动态列表
  Widget _getListData(context, index) {
    return ListTile(
        title: Text(listData[index]["title"]),
        leading: Image.network(listData[index]["imageUrl"]),
        subtitle: Text(listData[index]["author"])
        );
  }

  @override
  Widget build(BuildContext context) {
    //使用build
    return ListView.builder(
      //数据长度
        itemCount: listData.length,
        //每一个数据的内容,会传入 上下文context和下标index
         itemBuilder: this._getListData);
  }
}







posted @ 2020-04-05 13:27  紫月java  阅读(517)  评论(0)    收藏  举报