flutter 九宫格菜单_Flutter页面开发体验

背景

Flutter作为新晋 网红 ，虽然还没有在我们项目中商用，但是热度已经有赶超ReactNative的趋势。 为了体验其开发效率和能力验证，我们将项目主界面中的个人页面进行Flutter重构。

为什么不选其他更复杂的界面呢？因为首页已经被重构了，没必要重复劳作。

构思

高度还原原版效果，可以对其进行截图，标注各部大小。为了简化这个过程，我们对大部分的模块只做预估，保证基本样子一致就行，不做像素级别的复制。 当然如果设计稿标注图还有也是可以的。

首先搭建静态页面，我们需要将整个页面进行拆解，适当划分模块可以进行合理的代码组织并便于后续维护。

如图，可以大致分解为四块：

头部

头部运营位

腰部运营位

底部运营九宫格

界面抽象

基于前面的模块拆分，我们可以将每一块抽象为一个页面组件Widget，然后将四个组件按顺序组装在一起，就得到我们的效果图。 在学习了Flutter的技术文档之后，我们知道有很多基础的布局控件可以使用 Layout widgets 。

基本上通过该文介绍的组件我们就可以搭建出四个基础模块，下面逐一分析。

头部Widget

这里有一个底图是块大背景，然后有一个导航栏按钮，用户头像，昵称。由于Flutter中并不是每个组件都具备边距属性，因此为了精确实现效果，我们需要适当包裹一层边距，比如Container和Padding。

_stackHeader(BuildContext context) {

return Stack(

children: [

Container(

color: Colors.white,

width: 480,

child: Image.asset('assets/mycenter_head_bg.png', fit: BoxFit.cover),

),

Container(

margin: EdgeInsetsDirectional.only(top: 80, start: 15),

child: