【Flutter】如何优美地实现一个悬浮NavigationBar
【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，不过理想很丰满。最后在实验的过程中反倒没有触发，没有找到原因，希望有感兴趣的大佬可以指点一下。
理论参考：Flutter 小而美系列｜TickerProviderStateMixin 对生命周期的影响 - 掘金 (juejin.cn)
使用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内的，具体参考了以下这篇博客：
Flutter系列之设置TabBar的tab紧凑排列_flutter tabbar间隔-CSDN博客
关于页面路由的问题
最难的部分就是这里，主要在于如何控制路由到其他界面就可以消失，再pop回来就可以显示。
我们希望这些功能都可以在RootPage这一层实现，而不在各种子页面的push和pop中增添代码负担。
具体实现起来最初我的尝试是didChangeDependencies，但是最后实验下来并没有结果，我自己也并不知道原因。（小白是这样的）
而我最终决定采用原始的NavigationObserver方法，这里感谢这个组件替我实现了这个功能：
lifecycle_lite | Flutter Package (pub.dev)
于是可以通过简单的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);
}
}
热门相关：慕先生的小骄傲 楚氏赘婿 慕少，你老婆又重生了 智慧的性生活 宠物小精灵之庭树