【Flutter】微信项目实战【04】发现界面搭建

·  阅读 1530
【Flutter】微信项目实战【04】发现界面搭建

「这是我参与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中的抽象类和接口

【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之间的大的间隔还是使用SizedBoxcell 的底部的分割线是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. 写在后面

关注我,更多内容持续输出

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的,可以来一波 收藏+关注,以免你下次找不到我😁🌹

🌹欢迎大家留言交流,批评指正,转发请注明出处,谢谢支持!🌹

分类:
iOS
标签:
收藏成功!
已添加到「」, 点击更改