2 Flutter UI 之 List 组件

一  简单的List 组件

 children: <Widget>[
            ListTile(
                // 左边可以放图片 放置图标都可以
                leading: Image.asset("images/a.jpeg"),
                // 主标题
                title: Text("强国建设、民族复兴的唯一正确道",
                    style: TextStyle(fontSize: 20, color: Colors.red)),
                // 子标题
                subtitle: Text(
                  "把力量凝聚到实现党的二十大确定的目标任务上把力量凝聚到实现党的二十大确定的目标任务上把力",
                  maxLines: 2,
                )),
            ListTile(
                leading: Image.asset("images/a.jpeg"),
                title: Text("强国建设、民族复兴的唯一正确道",
                    style: TextStyle(fontSize: 20, color: Colors.red)),
                subtitle: Text(
                  "把力量凝聚到实现党的二十大确定的目标任务上把力量凝聚到实现党的二十大确定的目标任务上把力",
                  maxLines: 2,
                )),
            ListTile(
                leading: Image.asset("images/a.jpeg"),
                title: Text("强国建设、民族复兴的唯一正确道",
                    style: TextStyle(fontSize: 20, color: Colors.red)),
                subtitle: Text(
                  "把力量凝聚到实现党的二十大确定的目标任务上把力量凝聚到实现党的二十大确定的目标任务上把力",
                  maxLines: 2,
                ))
          ],

二 水平列表

 

水平滑动 设置滚动方向

Container(
            height: 180,
            child: ListView(
              padding: EdgeInsets.all(10),
              scrollDirection: Axis.horizontal,
              // ignore: prefer_const_literals_to_create_immutables
              children: <Widget>[
                // 滚动方向设置为水平
                Container(
                  width: 110,
                  color: Colors.lightBlue,
                ),
                Container(
                  width: 110,
                  color: Colors.lightGreen,
                  child: Container(
                    child: ListView(
                      children: [
                        Text("大风风起兮云飞扬风起兮云飞扬"),
                        Image.network(
                            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F09%2F20210609081952_51ef5.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1678624103&t=9a08456ce6cd15d2c5249532d13d0e0a")
                      ],
                    ),
                  ),
                ),
                Container(
                  width: 110,
                  color: Colors.red,
                ),
                Container(
                  width: 110,
                  color: Colors.yellow,
                )
              ],
            ))

三 动态数据列表

模拟本地数据

  List<Widget> _getListData() {
    List<Widget> list = [];
    for (int i = 0; i < 20; i++) {
      list.add(ListTile(
        title: Text("我是第$i行数据"),
      ));
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
            child: ListView(
          children: this._getListData(),
        )));
  }

四 ListView builder 方法创建动态列表

模拟网络数据 

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',
  }
];

  Widget _getListData(context, index) {
    return ListTile(
      title: Text(listData[index]["title"]),
      subtitle: Text(listData[index]["author"]),
      leading: Image.network(listData[index]["imageUrl"]),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
            child: ListView.builder(
                itemCount: listData.length, itemBuilder: this._getListData)));
  }