「这是我参与11月更文挑战的第10天,活动详情查看: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中的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】我的界面建立(上)
【Flutter】微信项目实战【03】我的界面建立(下)
GitHub项目地址
2. 发现页面
2.1 发现页面全体剖析
上一篇博客写了微信的我的界面,经过自定义 cell 把列表完成, 在cell 的定制的时分考虑了发现页面的状况,我的和发现页面几乎是相同的,在定制的时分就兼容了发现页面,所以能够直接拿过来用。
先看看最根底的展现状况:
class _DiscoverState extends State<DiscoverPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'发现',
style: TextStyle(color: Colors.black),
),
),
body:const Center(
child: Text('发现页面'),
),
);
}
}
发现页面布局也没有什么可说的了,和我的
页面就是一模相同的,就是少了一个头部的Widget
罢了,也是选用一个Container
作为全体的容器,列表就是一个ListView
,然后ListView
里边就是放 cell
就能够了。
cell
之间的大的距离还是运用SizedBox
,cell
的底部的分割线是Row
包裹左右的Container
来完成的。
- 全体的代码结构如下
2.2 代码完成
- 分割线SizedBox完成
//距离
const SizedBox(
height: 10,
),
- 分割线
//分割线
Row(
children: <Widget>[
Container(width: 50, height: 0.5, color: Colors.white),
Container(height: 0.5, color: Colors.grey)
],
),
整个的ListView
里边的代码就不悉数贴出来了,设置都是相同的,就贴一部分,其他照着写就能够了,不愿意自己敲的老铁直接看这儿GitHub。
..........代码省略...................
//朋友圈
const MineCell(
imageName: 'images/朋友圈.png',
title: '朋友圈',
),
//距离
const SizedBox(
height: 10,
),
//扫一扫
const MineCell(
imageName: 'images/扫一扫2.png',
title: '扫一扫',
),
//分割线
Row(
children: <Widget>[
Container(width: 50, height: 0.5, color: Colors.white),
Container(height: 0.5, color: Colors.grey)
],
),
//摇一摇
const MineCell(
imageName: 'images/摇一摇.png',
title: '摇一摇',
),
..........代码省略...................
2.3 导航栏设置
咱们这儿的导航栏是默认的色彩,咱们也能够自己设置导航栏的色彩。在AppBar
里边有个backgroundColor
属性,就是设置导航栏布景色彩的。
appBar: AppBar(
backgroundColor: GlobalThemeColor,
),
咱们发现导航栏底部有一条黑线
,这个状况在咱们iOS
开发中也是常常遇到,那么在 Flutter
里边应该怎样去掉呢? Flutter
里边去掉就比较简单明了了,直接一个属性设置就OK 了,也是在AppBar
的属性设置。
appBar: AppBar(
backgroundColor: GlobalThemeColor,
title: const Text('发现',style: TextStyle(color: Colors.black)),
elevation: 0.0, //导航栏底部边栏,这样设置就没有底部的黑线了
),
不了解 Appbar
能够去这儿看看Flutter】根底组件【07】Appbar
那么微信发现页面就完成了,老铁们能够自己去动手完成一下,没有时刻的老铁能够直接去看GitHub
项目地址
3. 写在后面
重视我,更多内容持续输出
- CSDN
- 简书
喜欢就点个赞吧
觉得有收成的,能够来一波 保藏+重视,以免你下次找不到我
欢迎我们留言交流,批评指正,
转发
请注明出处,谢谢支撑!