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

最新推荐文章于 2021-09-06 14:57:42 发布

王睿丶

最新推荐文章于 2021-09-06 14:57:42 发布

阅读量933

点赞数

分类专栏： Flutter 文章标签： Flutter 基础列表组件水平列表组件图标组件 Futter基础《四》—— 基础列表组件、水平列表组件、图标组件

本文链接：https://blog.csdn.net/qq_27494201/article/details/103216605

版权

Flutter 专栏收录该内容

93 篇文章 6 订阅

订阅专栏

文章目录

一丶效果图

【1】基础列表

在这里插入图片描述
【2】基础列表+图标组件

【3】基础列表+引用远程图片
在这里插入图片描述

【4】垂直列表

在这里插入图片描述
【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>					 列表元素

四丶笔记

1、在ListView的children: 里可以放置任何的组件

2、我们在写完每一个ListTile（android里的item）后，它会自动的生成Widget数组，这就相当于是一个adapter管理数据后的一个数组

王睿丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Futter基础第4篇：实现基础列表组件、水平列表组件、图标组件【ListView、Axis.vertical、Axis.horizontal】

一丶代码+注释【1】基础列表import 'package:flutter/material.dart';void main()=>runApp(MyApp());class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: impleme...
复制链接

扫一扫