「这是我参加11月更文应战的第9天,活动详情检查:2021最后一次更文应战」
【Flutter】学习养成记,【程序员必备技术】
【Flutter】微信项目实战!
1. 写在前面
在上篇文章中现已对微信我
的界面的头部进行了界面的布局建立,还有下面列表部分没有弄完,那么今日就继续来写微信实战项目,包含自定义cell
!
- 【根底语法合集】
【Flutter】Dart中的var、final 和 const基本运用
【Flutter】Dart数据类型之num
【Flutter】Dart数据类型之String
【Flutter】Dart的数据类型list&Map(数组和字典)
【Flutter】Dart的办法与箭头函数
【Flutter】Dart的办法中的可选参数、办法作为参数传递
【Flutter】Dart中的匿名函数、闭包
【Flutter】Dart中的类和对象
【Flutter】Dart中的结构函数
【Flutter】Dart的工厂结构办法&单例对象&初始化列表
【Flutter】Dart的类办法和对象操作符
【Flutter】Dart中的继承
【Flutter】Dart中的抽象类和接口
【Flutter】Dart中的Mixins混入你知道是什么吗?
- [根底组件合集]
【Flutter】根底组件【01】Text
【Flutter】根底组件【02】Container
【Flutter】根底组件【03】Scaffold
【Flutter】根底组件【04】Row/Column
【Flutter】根底组件【05】Image
【Flutter】根底组件【06】Icon
【Flutter】根底组件【07】Appbar
【Flutter】根底组件【08】BottomNavigationBar
【Flutter】根底组件【09】Button
- [项目实战合集]
【Flutter】微信项目实战【01】基本框架建立
【Flutter】微信项目实战【02】我的界面建立(上)
GitHub项目地址
2. 列表完成剖析
咱们先来剖析一下列表List
的结构组成,有图片,有文字,有左面的有右边的,cell
之间还有灰色的间隔,还有切割线。
一个 cell
的全体肯定是一个Container
,左右也是一个Container
,图片和文字可所以Container
包裹一个Row
,是左右的布局。
整个列表的肯定是ListView
, cell
之间是上下结构,能够运用Column
来布局。
3. 自定义 cell
自定义 cell,咱们要考虑扩展性,看看是否其他页面也能够共用,我
的界面的 cell 里边是有图片、文字、箭头。
在发现
页面的 cell 还有子标题和子图片,如下:
那么在cell
的特点就有标题、图片、子标题、子图标,箭头,箭头是每个 cell
都有的,就不需要设置特点了,直接代码里边写就能够了。
final String? title;//标题
final String? subTitle;//子标题
final String? imageName;//图标
final String? subImageName;//子图标
//结构办法
const MineCell({this.title, this.subTitle, this.imageName, this.subImageName});
在结构办法里边用
{ }
括起来的便是可选的参数,?
号修饰是表明空安全
,能够为 null,便是类型于Swift
里边的可选的意思,运用的时候要用!
号修饰,表明不为 null 是有值的,下面代码里边会有运用到。
cell
要响应点击的事情,那么就需要一个GestureDetector
来包裹起来,而且完成点击的办法。
- left
//left
Container(
padding: const EdgeInsets.all(10),
child: Row(
children: <Widget>[
Image(
image: AssetImage(imageName!),
width: 20,
),
SizedBox(
width: 15,
),
Text(title!),
],
),
)
SizedBox
能够创立一个固定巨细的框,具有固定宽高的组件,能够设置宽高,这儿是用来切割、占位用的。
- right
Container(
padding: EdgeInsets.all(10),
child: Row(
children: <Widget>[
subTitle != null ? Text(subTitle!) : const Text(''),
subImageName != null
? Image(
image: AssetImage(subImageName!),
width: 12,
)
: Container(),
//箭头
const Image(
image: AssetImage('images/icon_right.png'),
width: 14,
)
],
),
)
现在就完成了 cell 的自定义了,那么接下来便是列表的全体完成了。
4. ListView 完成列表
咱们把自定义的 cell
的头文件导入到我的界面mine_page
里边。大体代码结构如下:
- ListView 代码如下
........部分代码省掉............
children: [
const SizedBox(height: 10,),
const MineCell(
imageName: 'images/微信支付.png',
title: '支付',
),
const SizedBox(
height: 10,
),
const MineCell(
imageName: 'images/微信保藏.png',
title: '保藏',
),
//cell 底部切割线
Row(
children: <Widget>[
//左右
Container(width: 50, height: 0.5, color: Colors.white),
//Container(height: 0.5, color: Colors.grey)
],
)
........部分代码省掉............
]
cell
之间大的间隙咱们运用SizedBox
来完成,cell
底部的间隙,这儿的完成是:
Row(
children: <Widget>[
//左右
Container(width: 50, height: 0.5, color: Colors.white),
Container(height: 0.5, color: Colors.grey)
],
)
cell
底部的切割线是没有占满屏幕宽度的,咱们能够运用Row
左右布局,左面固定一个宽度和高度的Container
,右边固定一个高度Container
,那么宽度就自动拉满了,然后设置一下颜色就 OK 了。
Flutter
的布局还是很方便的,也很灵活,有爱好的老铁自己动手去完成一下吧!
GitHub项目地址
5. 写在后面
关注我,更多内容持续输出
- CSDN
- 简书
喜欢就点个赞吧
觉得有收成的,能够来一波 保藏+关注,以免你下次找不到我
欢迎大家留言交流,批评指正,
转发
请注明出处,谢谢支持!