Flutter 不规则底部导航栏实现

2024-01-31 14:44:58

前言：

各位同学大家好，最近国庆放假期间因为没有回老家过节（没买到车票啊）就写了一些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，小弟在这里谢过啦

码农公寓

前言：

准备工作

具体实现：

悬浮按钮的实现

最后总结：

相关文章