本头条核心宗旨

欢迎来到技术刚刚好头条，本头条是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

技术刚刚好经历

近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！

本篇文章中心思想

本文介绍一下Flutter实现，APP底部导航栏按钮的几种实现方式。CupertinoTabBar，BottomNavigationBar，CupertinoTabScaffold，CupertinoTabView。接下来我会把每种实现方式都来介绍一下。

Flutter开发底部导航实现方式一CupertinoTabBar

CupertinoTabBar是Flutter内置的iOS风格的选项卡，用于在页面底部显示几个Tab，要使用Cupertino风格的组件，必须先导入头文件，如下代码：
import 'package:flutter/cupertino.dart';

CupertinoTabBar组件的用法也比较简单，代码如下：
class CupertinoTabBarDemo extends StatefulWidget {
 @override
 _CupertinoTabBarDemoState createState() => _CupertinoTabBarDemoState();
}

class _CupertinoTabBarDemoState extends State<CupertinoTabBarDemo> {
 @override
 Widget build(BuildContext context) {
 return CupertinoTabScaffold(
 tabBar: CupertinoTabBar(
 items: <BottomNavigationBarItem>[
 BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), title: Text('首页')),
 BottomNavigationBarItem(icon: Icon(CupertinoIcons.conversation_bubble), title: Text('消息')),
 BottomNavigationBarItem(icon: Icon(CupertinoIcons.profile_circled), title: Text('我的')),
 ],
 ),
 tabBuilder: (BuildContext context, int index) {
 return CupertinoTabView(
 builder: (BuildContext context) {
 return CupertinoPageScaffold(
 navigationBar: CupertinoNavigationBar(
 middle: Text('Page 1 of tab $index'),
 ),
 child: Center(), // 这里有省略一些代码
 );
 },
 );
 },
 );
 }

}

根据官方推荐，想实现 iOS 风格的底部导航栏，最推荐的就是将 CupertinoTabBar 和 CupertinoTabScaffold 组合使用，使用起来也很方便。当然，虽然也能把 CupertinoTabBar 用在 material 风格中，比如传入 Scaffold.bottomNavigationBar 属性中使用，但总归会显得有点怪异。

第三方开源的实现方式

https://github.com/TechieBlossom/simpleanimations

这种也挺好看的，如下：

实现方式如下代码：

https://medium.com/@tonyowen/flutter-bottom-tab-bar-animation-75d1ca58c096

总结

今天就实现这些了，后续继续更新其他的实现方式。

谢谢观看技术刚刚好头条文章，本头条是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。