Flutter - ListView组件

• ListView 组件的用途与使用
• ListTitle 横条组件的使用
• ListTitle leading属性的使用(添加图标)
• 通过ListTitle制作横向图片列表
• ListView 横向列表
• 组件化

ListView

ListView组件为我们提供了列表的组件功能,类似于HTML中使用ul标签或者ol标签,在项目中还是非常常用的

ListTitle 横条组件的使用

我们前面简单介绍了ListView组件,那么配合ListView使用我们经常会用到ListTitle,例如新闻列表页这种情况

• title 主标题
• subtitle 副标题
• leading 添加图标

import 'package:flutter/material.dart';
void main() => runApp(myApp());
class myApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'beline App',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView Widget')),
        body: ListView(
          children: [
            ListTile(
              title: Text('这是主标题1'),
              subtitle: Text('副标题1'),
            ),
            ListTile(
              title: Text('这是主标题2'),
              subtitle: Text('副标题2'),
            ),
            ListTile(
              title: Text('这是主标题3'),
              subtitle: Text('副标题3'),
            )
          ],
        )
      ),
    );
  }
}

页面展示:

image.png

leading组件 以及 Icon 组件

Flutter为我们提供了非常丰富的icon图标,能够满足一般对图标要求不高的小型项目,在leading中使用Icon:

ListTile(
  leading: Icon(Icons.perm_camera_mic),
  title: Text('这是主标题1'),
),

在vscode中,鼠标指在icon上的时候,是可以看到预览的样式的

image.png

通过ListTitle制作竖向图片列表

我们发现LsitView组件下需要我们传入的是一个列表,需要是Widget的,也就是需要传入每个组件.所以我们可以结合前面学的,通过传入4个容器分别放入不同的图片,也是可以的

import 'package:flutter/material.dart';
void main() => runApp(myApp());
class myApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'beline App',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView Widget')),
        body: ListView(
          children: [
            Container(
              child: Image.network(
                'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3072747297,1823224383&fm=26&gp=0.jpg',
                fit: BoxFit.fitWidth,
              ),
              width: 375.0,
              height:200.0
            ),
            Container(
              child: Image.network(
                'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3762095652,4288929885&fm=26&gp=0.jpg',
                fit: BoxFit.fitWidth,
              ),
              width: 375.0,
              height:200.0
            ),
            Container(
              child: Image.network(
                'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3667034064,2571844910&fm=26&gp=0.jpg',
                fit: BoxFit.fitWidth,
              ),
              width: 375.0,
              height:200.0
            ),
            Container(
              child: Image.network(
                'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2841956188,3388531992&fm=26&gp=0.jpg',
                fit: BoxFit.fitWidth,
              ),
              width: 375.0,
              height:200.0
            )
          ],
        )
      ),
    );
  }
}

页面展现样式:

image.png

ListView 横向列表

前面我们在实用ListView组件的时候,都是直接通过传入一个widget的数组.这个时候如果我们添加scrollDirection属性,就可以设置ListView的布局方式是横向还是竖向了

• Axis.horizontal 横向
• Axis.vertical 竖向布
  我们现在通过横向布局打方式,在ListView下横向排列4个容器,并且超出屏幕边缘,可通过手势横向拉动

import 'package:flutter/material.dart';
void main() => runApp(myApp());
class myApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'beline App',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView Widget')),
        body: Center(
          child: Container(
            height:200.0,
            child: ListView(
              scrollDirection: Axis.horizontal,//- horizontal 横向布局 ; vertical 纵向布局
              children: [
                Container(
                  width: 180.0,
                  color: Colors.lightBlue,
                ),
                Container(
                  width: 180.0,
                  color: Colors.amber,
                ),
                Container(
                  width: 180.0,
                  color: Colors.redAccent,
                ),
                Container(
                  width: 180.0,
                  color: Colors.grey,
                ),
              ],
            ),
          ),
        )
      ),
    );
  }
}

image.png

组件化

在Flutter中万事皆组件,前一个demo中,我们通过一个容器中放入一个ListView组件,而ListView中又深度嵌套了几个容器,然后容器中在项目里可能还会有其他的内容,这样的层层嵌套,在日后维护是非常困难的,可以说是灾难性的,那么现在我们就把ListView提取出来,让他本身成为一个组件
既然要做组件提取,下面第一个demo我们将做的更加深入一些,
要求:

• 提取ListView成为一个组件
• 为ListView下每个容器内的内容提取一个组件,每个组件中放入一个图片和名字

import 'package:flutter/material.dart';
void main() => runApp(myApp());
class myApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'beline App',
      home: Scaffold(
        appBar: AppBar(title: Text('ListView Widget')),
        body: Center(
          child: Container(
            height:200.0,
            child: MyList(),
          ),
        )
      ),
    );
  }
}

class MyList extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      scrollDirection: Axis.horizontal,//- horizontal 横向布局 ; vertical 纵向布局
        children: [
          Container(
            width: 180.0,
            color: Colors.lightBlue,
            child: belineItem(),
          ),
          Container(
            width: 180.0,
            color: Colors.amber,
            child: belineItem(),
          ),
          Container(
            width: 180.0,
            color: Colors.redAccent,
            child: belineItem(),
          ),
          Container(
            width: 180.0,
            color: Colors.grey,
            child: belineItem(),
          ),
        ],
    );
  }
}

//- 每个栏目中放入一个头像和名字
class belineItem extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      child: ListView(
        children: [
          Image.network('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1283550294,498278536&fm=15&gp=0.jpg'),
          Text('beline'),
        ],
      ),
    );
  }
}

image.png

从上面的demo,我们可以发现,main的入口文件引入的MyApp的内容已经简化了,通过组件的形式引入,更方便与以后的维护.