Futter基础第4篇： 实现基础列表组件、 水平列表组件 、 图标组件【ListView、Axis.vertical、Axis.horizontal】
2024-05-12 18:00:54
文章目录
- 一丶 效果图
- 二丶 代码+注释
- 三丶 知识点
- 四丶 笔记
一丶 效果图
【1】基础列表
【2】基础列表+图标组件
【3】基础列表+引用远程图片
【4】垂直列表
【5】水平列表
二丶 代码+注释
【1】基础列表
import 'package:flutter/material.dart';void main()=>runApp(MyApp());class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn MaterialApp(home:Scaffold(appBar: AppBar(title: Text('Hello Flutter'),),body: HomeContent(),));}
}class HomeContent extends StatelessWidget{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn 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管理数据后的一个数组
Futter基础第4篇： 实现基础列表组件、 水平列表组件 、 图标组件【ListView、Axis.vertical、Axis.horizontal】相关推荐
- python进阶_基础篇10（函数进阶，列表推导式）
函数进阶 函数就是变量 定义函数的时候,其实就是在定义一个类型时function的变量,函数名就是变量名 普通变量能做的事情,函数都可以做 print('===================1.函数 ...
- pandas object转float_数据分析篇 | Pandas基础用法6【完结篇】
这是最后一篇,至此Pandas系列终于连载完了,有需要的也可以看看前面6篇,尽请收藏. 数据分析篇 | Pandas 概览 数据分析篇 | Pandas基础用法1数据分析篇 | Pandas基础用法2 ...
- python turtle基本语法_Python 基础语法-turtle篇
Python 基础语法-turtle篇 今天这节课主要讲了类的概念,并引出turtle中的函数和Turtle类. -创建一个Turtle类:brad=turtle.Turtle() -定义Turtle ...
- JavaScript 基础知识 - BOM篇
前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
- vue.js路由配置vue-router的基础学习 - 概念篇
文章目录 引言 · 相关问题小结: 一.动态路由匹配 (两种情况) A. 两种情况,代码对比: B. 两种情况,效果图对比: C. 提醒 · 仔细体会: D. 优先级的问题: 二.嵌套路由 引言 · ...
- JavaScript 基础知识 - DOM篇(二)
7. 节点操作 7.1 节点的属性 节点分类: 标签节点 文本节点 属性节点 注释节点 节点常用的属性: nodeType:节点的类型 nodeName:节点名称 nodeValue:节点值 常见的节 ...
- Python基础语法入门篇(一)
Python基础语法入门篇(二) 1. 注释 在我们工作编码的过程中,如果一段代码的逻辑比较复杂,不是特别容易理解,可以适当的添加注释,以辅助自己 或者其他编码人员解读代码. 注释是给程序员看的,为了 ...
- HTML，css和JavaScript的基础学习—css篇
HTML,css和JavaScript的基础学习-css篇 1.css是什么?由什么组成? 层叠样式表,定制html元素的显示样式,美化页面,对于前端页面的搭建十分重要. 由三部分组成:选择器,属性, ...
- U3D_Shader编程（第二篇：基础夯实篇）
<U3D_Shader编程> ##<U3D_Shader编程>发布说明: ++++Shader一个高大上的领域,不管怎么样,我来了. ++++立钻哥哥从2018年开始正式对Sh ...
- Lua快速入门篇（基础概述）（Yanlz+toLua+xLua）
<Lua热更新> ##<Lua热更新>发布说明: ++++"Lua热更新"开始了,立钻哥哥终于开始此部分的探索了. ++++作为游戏发布迭代的重要技术:Lu ...
最新文章
- qq无限时间撤回消息bug_手机QQ新功能汇总，比微信有意思多了
- 乘法器的verilog实现（并行、移位相加、查找表）
- 【转】C++/CLI简介（什么是C++/CLI） -------C++/CLI 编程系列一
- linux gcc编译器误用-MM导致出现linker input file unused because linking not done
- SpringBoot:ApplicationEvent与ApplicationListener
- php mysql复杂查询_PHP MySQL如何做更复杂的查询
- java压缩包上传，解压，预览(利用editor.md和Jstree实现)和下载
- 编译OpenJDK8:configure error /usr/lib64/ccache/gcc is a symbolic link to ccache
- php禁止外部域名请求,php-阻止来自其他域的请求
- 【Flask+SocketIO】如何用Flask做一个快捷迷你的局域网聊天室
- windows通过javaw启动spring boot项目jar命令，查看进程命令，关闭进程命令
- 独创圆柱形投影，索尼高透光HOE全息显示方案详解
- ImageMagick将多张图片拼接成一张图片_如何将多张图片排列在一张图片呢？学会这两种技巧，轻松搞定...
- 十四年磨一剑，万能数据库查询分析器7.024版本 发布
- 施一公首部作品：《自我突围：向理想前行》
- 搭建IIS文件服务器
- 防火墙和上网行为管理组网中位置前后关系
- 房地产合同档案分类及编号规则
- 面对海量资产运维的行云管家应对之道
- 计算机osta试题,全国计算机信息高新技术(osta)考试项目