小菜鸡开始学习flutter之二十

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第20天，点击查看活动详情

今日目标

今天来学习了解下Flutter中一些常见的列表组件。
列表布局是在项目开发中最常用的一种布局方式。flutter中我们可以通过ListView来定义列表项，支持垂直和水平方向展示，通过一个属性就可以控制列表的显示方向。
列表有以下分类：

• 垂直列表
• 垂直图文列表
• 水平列表
• 动态列表
• 矩阵式列表

列表常见参数前瞻

名称	类型	说明
scrollDirection	Axis	horizaontal:水平列表 vertical:垂直列表
padding	EdgeInsetsGeometry	内边距
resolve	bool	组件方向排序
children	List	列表元素

基本列表

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement   build
    return ListView(
      padding: EdgeInsets.all(10.0),
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.usb_rounded, color: Colors.red[400], size: 30.0),
          trailing: Icon(Icons.safety_check),
          title: Text(
            '你太有才了',
            style: TextStyle(fontSize: 20.0, color: Colors.blue),
          ),
          subtitle: Text('关注&点赞'),
        ),
        ListTile(
          leading: Image.network(
              'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image'),
          title: Text('你太有才了'),
          subtitle: Text('关注&点赞'),
        ),
        ListTile(
          title: Text('你太有才了'),
          subtitle: Text('关注&点赞'),
        )
      ],
    );
  }
}

在ListView的children里面我们可以添加你想要的组件，通常会用ListTile来填充

垂直图文列表

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        Image.network(
          'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image',
          fit: BoxFit.cover,
        ),
        Image.network(
          'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image',
          fit: BoxFit.cover,
        ),
        Image.network(
          'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image',
          fit: BoxFit.cover,
        ),
        Image.network(
          'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image',
          fit: BoxFit.cover,
        )
      ],
    );
  }
}

像上面这样我们直接填充Image组件就能得到一个图片列表。

水平列表

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        MyImage(),
        MyImage(),
        MyImage(),
        MyImage(),
        MyImage()
      ],
    );
  }
}

class MyImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.network(
      'https://p9-passport.byteacctimg.com/img/user-avatar/c21cdb224f42c072c2bb55075c9adf8d~300x300.image',
      width: 40,
      height: 40,
    );
  }
}

水平列表只需要对ListView修改属性scrollDirection就好了，在水平列表里我们还可以在container里面嵌套listview~~，感觉就是在无限套娃

ending

持续学习,加油，如有不对的地方还请指正，谢谢~~