【Flutter】如何优美地实现一个悬浮NavigationBar
最近写代码的时候遇到了一个如下的需求：
整体来说，底部的条是一个浮动的悬浮窗，有如下的三个按钮：
- 点击左边的要进入“主页”
- 点击中间的按钮要进行页面跳转，能够进入“创作页”
- 点击右边的按钮切换到“个人中心”页
使用Overlay来实现悬浮效果
首先是这个窗口该如何创建的问题，显然需要Overlay悬浮在整个窗口顶部。
但是不能直接写在initState内，这样会触发“Build时重绘”的错误。所以我们可以利用 WidgetsBinding ，来监听 Callback ，这样可以保证在首页Build完成时能够立刻绘制这个悬浮的窗口。
/rootpage@override void didChangeDependencies() { print('root didChangeDependencies'); super.didChangeDependencies(); var widgetsBinding = WidgetsBinding.instance; widgetsBinding.addPostFrameCallback((callback) { print('addPostFrameCallback'); PNavigationBar.show(context, _tabController); }); } 我将这个放入到了 didChangeDependencies 内，主要是想通过混入 TickerProviderStateMixin 能够在路由回来时重新触发 didChangeDependencies ，不过理想很丰满。最后在实验的过程中反倒没有触发，没有找到原因，希望有感兴趣的大佬可以指点一下。
理论参考：
使用TabBar+TabView来实现NavigationBar的效果
首先说最简单的TabView部分
@override Widget build(BuildContext context) { return Scaffold( body: TabBarView( controller: _tabController, children: [ HomePage(), UserPage(), ], ), ); }这里需要一个TabController，相信比较熟悉的朋友们也知道，需要混入TickerProviderStateMixin，才可以声明
画框的部分是主要部分。
自定义实现一个PNavigationBar
（具体的代码在本文最后）
整个PNavigationBar的实现非常简单，定义了一个show，一个remove，一个refresh方法，这样可以保证任何组件任何页面都可以随时控制PNavigationBar的出现和消失。
图标的切换
因为NavigationBar是存在切换图标的功能的，而我们通过Image.asset获取的图标却没办法更新，所以我们需要手动调用 overlayEntry.markNeedsBuild 方法，来对整个底部组件进行重绘
中间按钮的实现
相信大家也会有最初跟我一样的疑问，因为TabBar与TabView，还有TabController的数必须一致，而我们中间有一个自定义的加号按钮，我在这里的实现非常简单粗暴，当然如果有更好的方法欢迎大佬指教。
我这里只是通过简单的运算，来将两个组件分别控制在左边和右边，之后加号按钮在中间。
当然整个TabBar的渲染逻辑其实是有问题的，想要更深入地改TabBar的排列方式，必须需要自己手写一个TabBar。默认的排列方式就是放到 Expanded 内的，具体参考了以下这篇博客：
关于页面路由的问题
最难的部分就是这里，主要在于如何控制路由到其他界面就可以消失，再pop回来就可以显示。
我们希望这些功能都可以在RootPage这一层实现，而不在各种子页面的push和pop中增添代码负担。
具体实现起来最初我的尝试是 didChangeDependencies ，但是最后实验下来并没有结果，我自己也并不知道原因。（小白是这样的）
而我最终决定采用原始的NavigationObserver方法，这里感谢这个组件替我实现了这个功能：
于是可以通过简单的onShow和onHide就可以实现啦！
代码呈现
当然还有很多细节都没有提到，写这个功能时遇到的问题也有不少，本人技术有限，能力有限。等代码再优化的时候可以作为库开源给大家。现在就暂且以这种博客的形式分享组件和代码。
import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';import 'package:flutter_screenutil/flutter_screenutil.dart';import 'package:picturebook/pages/test/test_page.dart';import '../color_utils.dart';class PNavigationBar { static OverlayEntry? overlayEntry; static show(BuildContext context, TabController tabController) { var overlayState = Overlay.of(context); overlayEntry = OverlayEntry( maintainState: true, builder: (BuildContext context) { final size = MediaQuery.of(context).size; final height = size.height; final width = size.width; final boxWidth = width * 0.46; final boxHeight = 60.h; final iconHeight = 45.h; return Positioned( bottom: height * 0.06, left: (width - boxWidth) / 2, right: (width - boxWidth) / 2, child: Stack( children: [ Container( decoration: BoxDecoration( color: ColorUtils.orange, borderRadius: BorderRadius.circular(boxHeight / 2), ), width: boxWidth, height: boxHeight, child: TabBar( controller: tabController, indicatorColor: Colors.transparent, padding: EdgeInsets.zero, onTap: (index) { tabController.animateTo(index); overlayEntry?.markNeedsBuild(); }, tabs: [ Padding( padding: EdgeInsets.only(right: iconHeight / 3), child: Container( width: iconHeight, height: iconHeight, decoration: BoxDecoration( color: Colors.white30, borderRadius: BorderRadius.circular(iconHeight / 2), ), child: Center( child: Image.asset( tabController.index == 0 ? 'assets/home_1.png' : 'assets/home_0.png', width: iconHeight * 0.5, )), ), ), Padding( padding: EdgeInsets.only(left: iconHeight / 3), child: Container( width: iconHeight, height: iconHeight, decoration: BoxDecoration( color: Colors.white30, borderRadius: BorderRadius.circular(iconHeight / 2), ), child: Center( child: Image.asset( tabController.index == 1 ? 'assets/user_1.png' : 'assets/user_0.png', width: iconHeight * 0.5, )), ), ), ], )), Align( alignment: Alignment.center, child: Padding( padding: EdgeInsets.only(top: (boxHeight - iconHeight) / 2), child: InkWell( onTap: () { print('push'); Navigator.push( context, MaterialPageRoute(builder: (context) => TestPage()), ); }, child: Container( width: iconHeight, height: iconHeight, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(iconHeight / 2), ), child: Center( child: Image.asset( 'assets/add.png', width: iconHeight * 0.5, )), ), ), ), ), ], ), ); }, ); overlayState.insert(overlayEntry!); } static remove() { if (overlayEntry != null) { overlayEntry!.remove(); } } static refresh(){ overlayEntry?.markNeedsBuild(); }}下面是使用的实例，非常优美简洁：
import 'package:flutter/material.dart';import 'package:lifecycle_lite/lifecycle_mixin.dart';import 'package:picturebook/pages/home_page.dart';import 'package:picturebook/pages/user_page.dart';import 'package:picturebook/utils/navigation/navigation_util.dart';class RootPage extends StatefulWidget { const RootPage({super.key}); @override State<RootPage> createState() => _RootPageState();}class _RootPageState extends State<RootPage> with TickerProviderStateMixin, LifecycleStatefulMixin { late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 2, vsync: this)..addListener(() { PNavigationBar.refresh(); }); } @override void didChangeDependencies() { super.didChangeDependencies(); var widgetsBinding = WidgetsBinding.instance; widgetsBinding.addPostFrameCallback((callback) { PNavigationBar.show(context, _tabController); }); } @override Widget build(BuildContext context) { return Scaffold( body: TabBarView( controller: _tabController, children: [ HomePage(), UserPage(), ], ), ); } @override void whenHide() { PNavigationBar.remove(); } @override void whenShow() { PNavigationBar.show(context, _tabController); }}