Flutter ListView （动态）列表组件、水平列表组件、图标组件详解

Flutter ListView （动态）列表组件、水平列表组件、图标组件

---

Flutter ListView 基础列表组件、水平列表组件、图标组件

列表常见的几种情况：

• 垂直列表
• 垂直图文列表
• 横向列表
• 动态列表

ListView组件常用的参数：

• scrollDirection: Axis, Axis.horizontal 横向列表 Axis.vertical 垂直列表(默认垂直列表)
• padding : EdgeInsetsGeometry, 内边距
• reverse : bool, 组件反向排序
• children : List, 列表元素

1. 基础案例列表示例，使用Icon装饰列表组件

// HomeContent 组件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),  // 设置10内边距
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.home,size: 50), // 设置图标 尺寸
          title: Text('这是列表标题内容',
            style: TextStyle(  // 设置标题样式
              fontSize: 23,
              fontWeight: FontWeight.w500
            )
          ),
          subtitle: Text('bilibili是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。'),
        ),
        ListTile(
          leading: Icon(Icons.settings), // 设置图标
          title: Text('这是列表标题内容'),
          subtitle: Text('这是列表副标题内容'),
        ),
        ListTile(
          trailing: Icon(Icons.settings_brightness), // 设置图标 放在后面
          title: Text('这是列表标题内容'),
          subtitle: Text('这是列表副标题内容'),
        ),
        ListTile(
          title: Text('这是列表标题内容'),
          subtitle: Text('这是列表副标题内容'),
        ),
        ListTile(
          title: Text('这是列表标题内容'),
          subtitle: Text('这是列表副标题内容'),
        )
      ],
    );
  }
}

案例效果展示：

2. 基础案例图片列表示例，使用Image装饰列表组件

// HomeContent 组件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      padding: EdgeInsets.all(10),  // 设置10内边距
      children: <Widget>[
        ListTile(
          leading: Image.network("https://b-ssl.duitang.com/uploads/item/201603/06/20160306015808_yYPGz.thumb.700_0.jpeg"), // 设置图片
          title: Text('这是列表标题内容',
            style: TextStyle(  // 设置标题样式
              fontSize: 23,
              fontWeight: FontWeight.w500
            )
          ),
          subtitle: Text('bilibili是国内知名的视频弹幕网站,这里有最及时的动漫新番,最棒的ACG氛围,最有创意的Up主。大家可以在这里找到许多欢乐。'),
        ),
        ListTile(
          leading: Image.network("https://b-ssl.duitang.com/uploads/item/201601/02/20160102164729_tQefv.jpeg"), // 设置图片
          title: Text('这是列表标题内容'),
          subtitle: Text('这是列表副标题内容'),
        ),
        ListTile(
          leading: Image.network("https://b-ssl.duitang.com/uploads/item/201501/16/20150116145245_x4zLY.jpeg"), // 设置图标 放在后面
          title: Text('这是列表标题内容'),
          subtitle: Text('这是列表副标题内容'),
        ),
        ListTile(
          title: Text('这是列表标题内容'),
          subtitle: Text('这是列表副标题内容'),
        )
      ],
    );
  }
}

案例效果展示：

3. 横向列表排列，适合用于横向图文列表布局

// HomeContent 组件
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.all(10),
      height: 250,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 180,
            color: Colors.cyan,
            child: ListView(
              children: <Widget>[
                Image.network("https://b-ssl.duitang.com/uploads/item/201510/14/20151014195239_vcHiX.thumb.700_0.jpeg"),
                Text(
                  "图片标题文字",
                  textAlign: TextAlign.center,
                )
              ],
            ),
          ),
          Container(
            width: 180,
            color: Colors.deepPurple
          ),
          Container(
            width: 180,
            color: Colors.indigo
          ),
          Container(
            width: 180,
            color: Colors.orange
          )
        ],
      ),
    );
  }
}

案例展示效果如下：

Flutter 动态列表组件

首先我们来看一下，List类型的使用
List是Dart的集合类型之一，其实你可以把它简单理解为数组，其他语言也都有这个类型。它的声明有几种方式：

• var myList = List(): 非固定长度的声明。
• var myList = List(2): 固定长度的声明。
• var myList= List():固定类型的声明方式。
• var myList = [1,2,3]: 对List直接赋值。

那我们这里使用的是一个List传递，然后直接用List中的generate方法进行生产List里的元素。最后的结果是生产了一个带值的List变量。代码如下：

void main () => runApp(MyApp(
  items: new List<String>.generate(1000, (i)=> "Item $i")
));

注解：

• 在main函数的runApp中调用了MyApp类，再使用类的使用传递了一个items参数,并使用generate生成器对items进行赋值。
• generate方法传递两个参数，第一个参数是生成的个数，第二个是方法。

1. 基础动态生成的列表

// HomeContent 组件
class HomeContent extends StatelessWidget{

  // 私有方法 _getData 生成列表
  List<Widget> _getData(){
    List<Widget> list = new List();
    for(int i=0;i<20;i++){
      list.add(
        ListTile(
          title: Text("我是一个${i+1}列表")
        )
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.all(10),
      child: ListView(
        children: this._getData(),
      ),
    );
  }
}

案例展示效果：

2. 动态数据生成的列表

// HomeContent 组件
class HomeContent extends StatelessWidget{

  // 私有方法 _getData 生成列表
  List<Widget> _getData(){
    // List list = new List();
    List listData = [{
      "title":"标题内容1",
      "author":"作者名称1",
      "imageUrl": "http://pic.qqtn.com/up/2020-1/2020011418121854630.jpg"
    },{
      "title":"标题内容2",
      "author":"作者名称2",
      "imageUrl": "http://pic4.zhimg.com/50/v2-d4fe5d28374d778e642d30f8019e2f9d_hd.jpg"
    },{
      "title":"标题内容3",
      "author":"作者名称3",
      "imageUrl": "https://b-ssl.duitang.com/uploads/item/201505/04/20150504234255_f2Gce.jpeg"
    },{
      "title":"标题内容4",
      "author":"作者名称4",
      "imageUrl": "https://b-ssl.duitang.com/uploads/item/201608/31/20160831175900_xUFNM.jpeg"
    }];

    var tempList = listData.map((v){
      return ListTile(
        leading: Image.network(v['imageUrl']),
        title: Text(v['title']),
        subtitle: Text(v['author']),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.all(10),
      child: ListView(
        children: this._getData(),
      ),
    );
  }
}

案例预览效果：

3. 使用ListView.builder创建动态列表

// HomeContent 组件
class HomeContent extends StatelessWidget{

  List list = new List();
  HomeContent(){
    for(int i=0;i<20;i++){
      this.list.add("我是一个${i+1}列表");
    }
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      padding: EdgeInsets.all(10),
      child: ListView.builder(
        itemCount: this.list.length,
        itemBuilder: (item, index){
          return ListTile(
            title: Text(this.list[index])
          );
        }
      )
    );
  }
}