「这是我参与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('发现页面'),
      ),
    );
  }
}

【Flutter】微信项目实战【04】发现界面搭建
发现页面布局也没有什么可说的了，和我的页面就是一模相同的，就是少了一个头部的Widget罢了，也是选用一个Container作为全体的容器，列表就是一个ListView，然后ListView里边就是放 cell就能够了。

cell之间的大的距离还是运用SizedBox，cell 的底部的分割线是Row包裹左右的Container来完成的。

  • 全体的代码结构如下
    【Flutter】微信项目实战【04】发现界面搭建

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: '摇一摇',
            ),
..........代码省略...................

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

2.3 导航栏设置

咱们这儿的导航栏是默认的色彩，咱们也能够自己设置导航栏的色彩。在AppBar里边有个backgroundColor属性，就是设置导航栏布景色彩的。

appBar: AppBar(
          backgroundColor: GlobalThemeColor,
        ),

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

咱们发现导航栏底部有一条黑线，这个状况在咱们iOS开发中也是常常遇到，那么在 Flutter 里边应该怎样去掉呢？ Flutter 里边去掉就比较简单明了了，直接一个属性设置就OK 了，也是在AppBar的属性设置。

appBar: AppBar(
          backgroundColor: GlobalThemeColor,
          title: const Text('发现',style: TextStyle(color: Colors.black)),
          elevation: 0.0, //导航栏底部边栏，这样设置就没有底部的黑线了
        ),

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

不了解 Appbar 能够去这儿看看Flutter】根底组件【07】Appbar

那么微信发现页面就完成了，老铁们能够自己去动手完成一下，没有时刻的老铁能够直接去看GitHub项目地址

3. 写在后面

重视我，更多内容持续输出

  • CSDN
  • 简书

喜欢就点个赞吧

觉得有收成的，能够来一波 保藏+重视，以免你下次找不到我

欢迎我们留言交流，批评指正，转发请注明出处，谢谢支撑！