Flutter 不规则底部导航栏实现

2020-10-06 06:35:58 阅读：298 来源： 互联网

标签：index title color flutter Colors 不规则导航 Flutter

前言：

各位同学大家好，最近国庆放假期间因为没有回老家过节（没买到车票啊）就写了一些flutter小案例就分享给大家不规则底部导航栏,那么废话不多说我们正式开始

准备工作

需要安装flutter的开发环境：大家可以去看看之前的教程：
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3
效果图：

微信截图_20201006025407.png

微信截图_20201006025421.png

微信截图_20201006025432.png

具体实现：

我们来看效果图：

微信截图_20201006030445.png

规则的底部导航我们都是用 BottomNavigationBar 组件然后里面放入对应的 BottomNavigationBarItem 组件实现但是我们今天是要做出不规则的底部导航我们要用 BottomAppBar 加上 FloatingActionButton 来实现

      bottomNavigationBar: BottomAppBar(
        color: Colors.lightBlue,
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(
              icon: Icon(
                Icons.home
              ),
              color: Colors.white,
              onPressed: (){
                 setState(() {
                   _index=0;
                 });
              },
            ),
            IconButton(
              icon: Icon(
                  Icons.airport_shuttle
              ),
              color: Colors.white,
              onPressed: (){
              setState(() {
                _index=1;
              });

              },
            ),
          ],
        ),
      ),

实现底部的替换我就在 BottomAppBar 组件中嵌套了一个Row横向线下组件来实现我们在Row组件的里面分别嵌套装载了2个 iconbutton 组件来展示我们点击线想要的导航用的tab

悬浮按钮的实现

这边悬浮按钮是用了 FloatingActionButton 来实现悬浮按钮

  floatingActionButton: FloatingActionButton(
        onPressed: (){
         print("添加哈哈哈");
         Navigator.of(context).push(MaterialPageRoute(builder: (context){
           return EachWidget(title: "new Pages",);
         })
         );
        },
        tooltip: "添加",
        child: Icon(Icons.add,
          color: Colors.white,
        ),
      ),

悬浮按钮FloatingActionButton 和BottomAppBar 结合实现不规则底部导航
使用了 Scaffold 脚手架框架里面的 floatingActionButtonLocation属性

 floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

完整代码如下：

import 'package:flutter/material.dart';
import 'package:flutter_anomalybottmtab/each_widget.dart';
/**
 * 创建人·：xuqing
 * 创建时间：2020年10月5日15:49:44
 * 类说明 不规则的底部导航栏
 *
 */
class BottomAppBarDemo extends StatefulWidget {
  BottomAppBarDemo({Key key}) : super(key: key);
  @override
  _BottomAppBarDemoState createState() {
    return _BottomAppBarDemoState();
  }
}
class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
   int _index=0;
  List<Widget>_eahcwidget=[
    EachWidget(title: "home",),
    EachWidget(title: "airport_shuttle",)
  ];
  @override
  void initState() {
    super.initState();
  }
  @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body:_eahcwidget[_index],
      floatingActionButton: FloatingActionButton(
        onPressed: (){
         print("添加哈哈哈");
         Navigator.of(context).push(MaterialPageRoute(builder: (context){
           return EachWidget(title: "new Pages",);
         })
         );
        },
        tooltip: "添加",
        child: Icon(Icons.add,
          color: Colors.white,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        color: Colors.lightBlue,
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(
              icon: Icon(
                Icons.home
              ),
              color: Colors.white,
              onPressed: (){
                 setState(() {
                   _index=0;
                 });
              },
            ),
            IconButton(
              icon: Icon(
                  Icons.airport_shuttle
              ),
              color: Colors.white,
              onPressed: (){
              setState(() {
                _index=1;
              });
              },
            ),
          ],
        ),
      ),
    );
  }
}

然后就是切换的逻辑，切换就比较简单我们还是定义一个数组和默认下标

   int _index=0;
  List<Widget>_eahcwidget=[
    EachWidget(title: "home",),
    EachWidget(title: "airport_shuttle",)
  ];

在body里面加载、

body:_eahcwidget[_index],

然后我们在响应的iconbutton点击事件中去重新复制下标下标默认是从0开始
这样我们就能完成不规则底部导航和切换的问题。

最后总结：

flutter中对于底部导航有着很多丰富好用的组件，短短的一些代码量就可以实现了对比起原生的来说要简单容易的多，我们主要要注意的 FloatingActionButton 和ButtomAppBar 的结合使用主要是要主体 Scaffold中的属性的运用，掌握好了我们就能实现如上甚至花样更多的底部导航，最后希望我的文章能帮助到各位解决问题，以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错，麻烦给关注和star，小弟在这里谢过啦

标签：index,title,color,flutter,Colors,不规则,导航,Flutter
来源： https://www.cnblogs.com/diablo987987/p/13772240.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Flutter 不规则底部导航栏实现

前言：

准备工作

具体实现：

悬浮按钮的实现

最后总结：