【Flutter】微信项目实战【04】发现界面搭建
站长
· 阅读数 4
📝【Flutter】学习养成记，【程序员必备技能】
📔【Flutter】微信项目实战！
1. 写在前面
- 【基础语法合集】
【Flutter】Dart中的var、final 和 const基本使用
【Flutter】Dart的数据类型list&Map(数组和字典)
【Flutter】Dart的方法中的可选参数、方法作为参数传递
【Flutter】Dart的工厂构造方法&单例对象&初始化列表
【Flutter】Dart中的Mixins混入你知道是什么吗？
- [基础组件合集]
- [项目实战合集]
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)
],
),
..........代码省略...................
//朋友圈
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, //导航栏底部边栏，这样设置就没有底部的黑线了
),
3. 写在后面
关注我，更多内容持续输出
🌹 喜欢就点个赞吧👍🌹
🌹 觉得有收获的，可以来一波 收藏+关注，以免你下次找不到我😁🌹
🌹欢迎大家留言交流，批评指正，
转发请注明出处，谢谢支持！🌹