flutter-仿闲鱼底部导航栏

上一篇搞定了flutter的环境配置，接下来了解了一下dart的语法，和flutter的一些页面布局结构，状态组件还有页面的跳转，开始做一个类似闲鱼的tabbar底部栏。

效果图

image.png

第一步创建app

笔者用的vscode开发，vscode需要装flutter插件，装好后重启，打开查看->命令面板 输入flutter会看到有new Project一行，点击后输入你的项目名回车就创建成功了。

面板
image.png

项目结构

刚建好的项目，我们只需要关系lib下面的文件

• main.dart：顾名思义，它应该是个主入口。

• pubspec.yaml: 这个相当于node的包管理package.json
  其他的文件目前就忽视掉吧。

  
  image.png

开始一个仿闲鱼底部栏

在flutter中已经封装好底部栏组件了，在Scaffold Widget中有bottomNavigationBar Widget这个就是底部的导航栏，我们需要设置三个属性：

1. items: 底部导航栏的每一个item
2. onTap: 底部栏切换事件
3. currentIndex: 设置当前选中的底部栏

 BottomNavigationBar(
     items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
        BottomNavigationBarItem(icon: Icon(Icons.add), title: Text('发布')),
        BottomNavigationBarItem(icon: Icon(Icons.person), title: Text('我的')),
     ],
     onTap: onTap,
     currentIndex: page,
),

我们设置BottomNavigationBar后，底部的三个按钮都是很普通的上面是图标下面是描述文字的tab按钮

image.png

重构BottomNavigationBar

1. 去掉中间发布的文字
2. 在底部定位一个Icon，让其居中
3. 给Icon设置圆角和背景颜色

在底部定位icon，我们需要用到一个布局Widget Stack，这个相当于web中的定位。使子元素堆砌在一起，然后使用Align让其子元素底部居中展示；给icon设置圆角和背景颜色需要用到Container Widget设置decoration: BorderRadius.circular(100), color: Colors.white，具体代码如下：

bottomNavigationBar: Stack(
  children: <Widget>[
    Align(
     alignment: Alignment.bottomCenter,
      child: BottomNavigationBar(
         items: [
             BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
             BottomNavigationBarItem(icon: Icon(Icons.add), title: Text('')),
             BottomNavigationBarItem(icon: Icon(Icons.person), title: Text('我的')),
         ],
         onTap: onTap,
        currentIndex: page,
      ),
    ),
    Align(
      alignment: Alignment.bottomCenter,
      child: Padding(
        padding: const EdgeInsets.only(bottom: 30.0),
        child: InkWell( // 去掉水波纹点击效果
          child: new Container( // 底部白色圆背景
             width: 80.0,
             height: 80.0,
             padding: const EdgeInsets.all(5.0),
             decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(100), // 设置圆角
               color: Colors.white,
             ),
             child: new Container( // 蓝色加号圆按钮
               decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100),
                  color: Colors.blue[500],
               ),
              child: new Icon(Icons.add, size: 50.0, color: Colors.white),
             )
          )
        ) 
      )
    )
  ],
),

启动模拟器查看效果

fn + F5 (mac)

QQ20191109-111455-HD.gif

总结

flutter在开发的时候感觉嵌套的太多了，一层层的嵌套，感觉会在维护代码的时候看起来很头疼，不过在开发的时候感觉还好；还需要多熟悉一些官方的Widget。