Futter基础第4篇：实现基础列表组件、水平列表组件、图标组件【ListView、Axis.vertical、Axis.horizontal】

原创

51CTO王睿丶 2021-08-26 11:14:39 博主文章分类：移动框架：Flutter ©著作权

文章标签 Flutter 基础列表组件水平列表组件图标组件 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者51CTO王睿丶的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录

一丶效果图

【1】基础列表

Futter基础第4篇：实现基础列表组件、水平列表组件、图标组件【ListView、Axis.vertical、Axis.horizontal】_图标组件
【2】基础列表+图标组件

【3】基础列表+引用远程图片
Futter基础第4篇：实现基础列表组件、水平列表组件、图标组件【ListView、Axis.vertical、Axis.horizontal】_Flutter_03

【4】垂直列表

Futter基础第4篇：实现基础列表组件、水平列表组件、图标组件【ListView、Axis.vertical、Axis.horizontal】_图标组件_04
【5】水平列表

二丶代码+注释

【1】基础列表

import 'package:flutter/material.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter'),
        ),
        body: HomeContent(),
      )
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(        //列表
      children: <Widget>[   //表示配置它的子元素
        ListTile(     //每个item一般都是写在ListTile里，这是规范
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就',
            style: TextStyle(
              fontSize: 18
            ),
          ),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
        ),
        ListTile(     //每个item一般都是写在ListTile里，这是规范
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就'),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
        ),
        ListTile(     //每个item一般都是写在ListTile里，这是规范
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就'),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
        ),
        ListTile(     //每个item一般都是写在ListTile里，这是规范
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就'),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
        ),
        ListTile(     //每个item一般都是写在ListTile里，这是规范
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就'),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
        ),
        ListTile(     //每个item一般都是写在ListTile里，这是规范
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就'),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
        )
      ],
    );
  }
}

【2】基础列表+图标组件

...
...
...
    return ListView(        //列表
      children: <Widget>[   //表示配置它的子元素
        ListTile(     //每个item一般都是写在ListTile里，这是规范
          leading: Icon(Icons.settings,color: Colors.yellow),    //在左侧放置一个图标,修改图标颜色
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就'),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
        ),
        ListTile(     //每个item一般都是写在ListTile里，这是规范
          leading: Icon(Icons.home,size: 30),    //在左侧放置一个图标
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就'),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
          trailing: Icon(Icons.settings),     //在右侧放置一个图标
        ),
        ListTile(     //每个item一般都是写在ListTile里，这是规范
          leading: Icon(Icons.settings),    //在左侧放置一个图标
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就'),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
        ),
        ListTile(     //每个item一般都是写在ListTile里，这是规范
          leading: Icon(Icons.home),    //在左侧放置一个图标
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就'),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
        )
      ],
    );

【3】基础列表+引用远程图片

...
...
...
    return ListView(        //列表
      children: <Widget>[   //表示配置它的子元素
        ListTile(     //每个item一般都是写在ListTile里，这是规范
          leading: Image.network("https://www.itying.com/images/flutter/1.png"),
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就'),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
        ),
        ListTile(     //每个item一般都是写在ListTile里，这是规范
          leading: Image.network("https://www.itying.com/images/flutter/2.png"),
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就'),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
          trailing: Image.network("https://www.itying.com/images/flutter/5.png")
        ),
        ListTile(     //每个item一般都是写在ListTile里，这是规范 
          leading: Image.network("https://www.itying.com/images/flutter/3.png"),
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就'),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
        ),
        ListTile(     //每个item一般都是写在ListTile里，这是规范
          leading: Image.network("https://www.itying.com/images/flutter/4.png"),
          title: Text('床前明月光，按数据库里大家都刻录机按时考虑到就开始拉到就'),  //标题
          subtitle: Text('阿斯利康大神解答控件阿斯科利大家酷啦四大皆空拉丝机的酷啦数据库了多久啊上课了多久啊上课了经典款了'), //内容
        )

      ],
    );

【4】垂直列表

...
...
    return ListView(
      scrollDirection: Axis.vertical,     //垂直列表
      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/2.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/4.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/5.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/6.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/2.png'),
        Image.network('https://www.itying.com/images/flutter/3.png'),
        Image.network('https://www.itying.com/images/flutter/4.png'),
        Image.network('https://www.itying.com/images/flutter/1.png'),
        Image.network('https://www.itying.com/images/flutter/2.png'),
        Image.network('https://www.itying.com/images/flutter/3.png'),
        Image.network('https://www.itying.com/images/flutter/1.png'),
        Image.network('https://www.itying.com/images/flutter/2.png'),
        Image.network('https://www.itying.com/images/flutter/3.png'),
      ],
    );

【5】水平列表

...
...
...
    return Container(
      height: 180,
        child: ListView(
//      scrollDirection: Axis.vertical,     //垂直列表
          scrollDirection: Axis.horizontal,        //水平列表,
          children: <Widget>[
            Container(
              width: 180.0,
              height: 180.0,
              color: Colors.yellow,
            ),
            Container(
              width: 180.0,
              height: 180.0,
              color: Colors.blue,
              child: ListView(
                children: <Widget>[
                  Image.network("https://www.itying.com/images/flutter/2.png"),
                  Text('我是一个文本')
                ],
              ),
            ),
            Container(
              width: 180.0,
              height: 180.0,
              color: Colors.red,
            ),
            Container(
              width: 180.0,
              height: 180.0,
              color: Colors.green,
            )
          ],
        ),
    );

三丶知识点

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

2、 Flutter 列表参数

名称 						类型 						说明
scrollDirection		 Axis Axis.horizontal 				水平列表
						Axis.vertical					垂直列表
						
padding 				EdgeInsetsGeometry 				内边距

resolve						 bool					 组件反向排序

children				 List<Widget>					 列表元素