文章目录

一、Scaffold 组件
二、底部导航栏整体架构
三、BottomNavigationBar 底部导航栏
四、BottomNavigationBarItem 导航栏条目
五、PageView 组件
六、完整代码示例
七、相关资源

一、Scaffold 组件

Flutter 中的 Scaffold 组件实现了基础的材料设计 ( Material Design ) 可视化布局结构 ;

Scaffold 提供了显示左侧侧拉导航栏 , 底部导航 , 浮动按钮等 API ;

Scaffold 构造函数如下 :

class Scaffold extends StatefulWidget {/// Creates a visual scaffold for material design widgets.const Scaffold({Key? key,this.appBar,   // 顶部的标题栏this.body,     // 中间显示的核心部分 , 标题栏下面的部分都是  this.floatingActionButton,           // 右下角的悬浮按钮 ( 可改变位置 )this.floatingActionButtonLocation,this.floatingActionButtonAnimator,this.persistentFooterButtons,this.drawer,  // 侧拉导航栏 this.onDrawerChanged,this.endDrawer,this.onEndDrawerChanged,this.bottomNavigationBar,this.bottomSheet,this.backgroundColor,this.resizeToAvoidBottomInset,this.primary = true,this.drawerDragStartBehavior = DragStartBehavior.start,this.extendBody = false,this.extendBodyBehindAppBar = false,this.drawerScrimColor,this.drawerEdgeDragWidth,this.drawerEnableOpenDragGesture = true,this.endDrawerEnableOpenDragGesture = true,this.restorationId,}) : assert(primary != null),assert(extendBody != null),assert(extendBodyBehindAppBar != null),assert(drawerDragStartBehavior != null),super(key: key);

二、底部导航栏整体架构

通过设置 Scaffold 组件的 bottomNavigationBar 字段 , 为其设置一个 BottomNavigationBar 底部导航栏组件 , 该底部导航栏的 item 设置图标与文字组件数组 , onTap 字段设置 ValueChanged<int> 点击回调方法 , 通过该方法设置当前选择的页面索引值 ;

Scaffold 组件的主题 body 字段设置 PageView 组件 , 该组件主要设置 PageController? controller 和 List<Widget> children 字段 , PageController 用于控制 PageView 中的页面跳转 , children 中就是 PageView 封装的多个界面组件 , 同一时间只显示一个 ;

三、BottomNavigationBar 底部导航栏

通过 Scaffold 组件的 bottomNavigationBar 字段 , 可以设置底部导航栏菜单 , 设置一个 BottomNavigationBar 组件 ;

BottomNavigationBar 组件中可设置 int currentIndex 当前的索引 , ValueChanged? onTap 点击事件 ,

BottomNavigationBar 组件需要设置组件的类型 , 在 BottomNavigationBarType? type 字段设置 , 有两个可选类型 , fixed 和 shifting ;

enum BottomNavigationBarType {/// BottomNavigationBar 导航栏底部的 BottomNavigationBarItem 宽度不变fixed,///  BottomNavigationBar 导航栏底部的 BottomNavigationBarItem 组件的位置和大小 ,/// 都会根据当前点击的选项而改变 , /// 改变的时候有切换动画/// 选中的状态下显示底部图标的文本 /// 不选中的状态下隐藏底部的文本内容 shifting,
}

BottomNavigationBar 的 List<BottomNavigationBarItem> items 字段接受 BottomNavigationBarItem 组件集合 ;

底部导航栏点击事件 , ValueChanged<int>? onTap 字段设置点击事件 , 传入的参数是点击的底部导航栏索引值 ;

BottomNavigationBar 构造函数 :

  BottomNavigationBar({Key? key,required this.items,this.onTap,this.currentIndex = 0,this.elevation,this.type,Color? fixedColor,this.backgroundColor,this.iconSize = 24.0,Color? selectedItemColor,this.unselectedItemColor,this.selectedIconTheme,this.unselectedIconTheme,this.selectedFontSize = 14.0,this.unselectedFontSize = 12.0,this.selectedLabelStyle,this.unselectedLabelStyle,this.showSelectedLabels,this.showUnselectedLabels,this.mouseCursor,this.enableFeedback,}) : assert(items != null),assert(items.length >= 2),assert(items.every((BottomNavigationBarItem item) => item.title != null) ||items.every((BottomNavigationBarItem item) => item.label != null),'Every item must have a non-null title or label',),assert(0 <= currentIndex && currentIndex < items.length),assert(elevation == null || elevation >= 0.0),assert(iconSize != null && iconSize >= 0.0),assert(selectedItemColor == null || fixedColor == null,'Either selectedItemColor or fixedColor can be specified, but not both'),assert(selectedFontSize != null && selectedFontSize >= 0.0),assert(unselectedFontSize != null && unselectedFontSize >= 0.0),selectedItemColor = selectedItemColor ?? fixedColor,super(key: key);

代码示例 :

BottomNavigationBar(/// 设置当前的导航页面索引currentIndex: _currentIndex,/// 导航栏按钮点击事件onTap: (pageIndex) {/// 跳转到对应的导航页面_pageController.jumpToPage(pageIndex);setState(() {_currentIndex = pageIndex;});},/// 图标和文本位置不变type: BottomNavigationBarType.fixed,/// 底部导航栏的按钮条目items: datas.map((TabData data) {/// 单个按钮条目return BottomNavigationBarItem(// 普通状态下的图标 , 绿色icon: Icon(data.icon,color: Colors.green,),/// 选中状态下的图标 , 红色activeIcon: Icon(data.icon,color: Colors.red,),/// 与 text 类似 , 只能设置一个label: data.title,);}).toList(),
),

四、BottomNavigationBarItem 导航栏条目

BottomNavigationBar 中需要设置 BottomNavigationBarItem 数组元素 , 这就需要创建若干 BottomNavigationBarItem 组件 ;

BottomNavigationBarItem 中可以设置

默认图标 Widget icon
底部文案 Widget? title
选中状态图标 Widget activeIcon
背景颜色 Color? backgroundColor

BottomNavigationBarItem 组件构造函数 :

  const BottomNavigationBarItem({required this.icon,@Deprecated('Use "label" instead, as it allows for an improved text-scaling experience. ''This feature was deprecated after v1.19.0.')this.title,this.label,Widget? activeIcon,this.backgroundColor,this.tooltip,}) : activeIcon = activeIcon ?? icon,assert(label == null || title == null),assert(icon != null);

五、PageView 组件

PageView 组件最重要的两个字段 :

PageController? controller
List<Widget> children

PageController 用于控制 PageView 的跳转 , PageController 主要作用是调用 void jumpToPage(int page) 方法 , 进行页面跳转 ;

jumpToPage 页面跳转在底部菜单栏的 onTap 点击事件中调用 , 更新当前页面后 , 需要调用 setState 方法更新界面 ;

PageView 构造函数 :

  PageView({Key? key,this.scrollDirection = Axis.horizontal, // 设置滚动方向 垂直 / 水平 this.reverse = false,   // 反向滚动 PageController? controller, // 滚动控制类 this.physics,  // 滚动逻辑 , 不滚动 / 滚动 / 滚动到边缘是否反弹 this.pageSnapping = true,   // 如果设置 false , 则无法进行页面手势捕捉 this.onPageChanged,     // 页面切换时回调该函数 List<Widget> children = const <Widget>[],this.dragStartBehavior = DragStartBehavior.start,this.allowImplicitScrolling = false,this.restorationId,this.clipBehavior = Clip.hardEdge,}) : assert(allowImplicitScrolling != null),assert(clipBehavior != null),controller = controller ?? _defaultPageController,childrenDelegate = SliverChildListDelegate(children),super(key: key);

PageView 代码示例 :

/// 滑动组件 , 界面的核心元素
PageView(/// 控制跳转翻页的控制器controller: _pageController,/// Widget 组件数组 , 设置多个 Widget 组件children: datas.map((TabData data) {return Padding(/// 内边距 20padding: const EdgeInsets.all(20.0),/// PageView 中单个显示的组件child: TabContent(data: data),);}).toList(),physics: NeverScrollableScrollPhysics(),
),

六、完整代码示例

完整代码示例 :

import 'package:flutter/material.dart';/// 底部导航栏示例
void main() {runApp(BottomNavigatorWidget());
}class BottomNavigatorWidget extends StatefulWidget {@override_BottomNavigatorWidgetState createState() => _BottomNavigatorWidgetState();
}class _BottomNavigatorWidgetState extends State<BottomNavigatorWidget>with SingleTickerProviderStateMixin {/// 当前的索引值int _currentIndex = 0;/// PageView 控制器 , 用于控制 PageViewvar _pageController = PageController(/// 初始索引值initialPage: 0,);@overridevoid dispose() {super.dispose();/// 销毁 PageView 控制器_pageController.dispose();}@overrideWidget build(BuildContext context) {/// 根组件return MaterialApp(home: Scaffold(/// 滑动组件 , 界面的核心元素body: PageView(/// 控制跳转翻页的控制器controller: _pageController,/// Widget 组件数组 , 设置多个 Widget 组件children: datas.map((TabData data) {return Padding(/// 内边距 20padding: const EdgeInsets.all(20.0),/// PageView 中单个显示的组件child: TabContent(data: data),);}).toList(),physics: NeverScrollableScrollPhysics(),),bottomNavigationBar: BottomNavigationBar(/// 设置当前的导航页面索引currentIndex: _currentIndex,/// 导航栏按钮点击事件onTap: (pageIndex) {/// 跳转到对应的导航页面_pageController.jumpToPage(pageIndex);setState(() {_currentIndex = pageIndex;});},/// 图标和文本位置不变type: BottomNavigationBarType.fixed,/// 底部导航栏的按钮条目items: datas.map((TabData data) {/// 单个按钮条目return BottomNavigationBarItem(// 普通状态下的图标 , 绿色icon: Icon(data.icon,color: Colors.green,),/// 选中状态下的图标 , 红色activeIcon: Icon(data.icon,color: Colors.red,),/// 与 text 类似 , 只能设置一个label: data.title,);}).toList(),),),);}
}/// 封装导航栏的图标与文本数据
class TabData {/// 导航数据构造函数const TabData({this.title, this.icon});/// 导航标题final String title;// 导航图标final IconData icon;
}/// 导航栏数据集合
const List<TabData> datas = const <TabData>[const TabData(title: '3D', icon: Icons.threed_rotation),const TabData(title: '打印机', icon: Icons.print),const TabData(title: '动画', icon: Icons.animation),const TabData(title: '变换', icon: Icons.transform),const TabData(title: '高度', icon: Icons.height),const TabData(title: '描述', icon: Icons.description),const TabData(title: '向前', icon: Icons.forward),const TabData(title: '相机', icon: Icons.camera),const TabData(title: '设置', icon: Icons.settings),const TabData(title: '学位', icon: Icons.school),
];/// 通过 TabBar 导航栏切换展示的主要内容
/// 用于在 TabBarView 中显示的组件
class TabContent extends StatelessWidget {const TabContent({Key key, this.data}) : super(key: key);/// 根据该数据条目生成组件final TabData data;@overrideWidget build(BuildContext context) {TextStyle textStyle = TextStyle(color: Colors.yellow, fontSize: 50);return Card(/// 设置 20 像素边距margin: EdgeInsets.all(20),/// 设置阴影elevation: 10,/// 卡片颜色黑色color: Colors.black,/// 卡片中的元素居中显示child: Center(/// 垂直方向的线性布局child: Column(/// 在主轴 ( 垂直方向 ) 占据的大小mainAxisSize: MainAxisSize.min,/// 居中显示crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[/// 设置图标Icon(data.icon, size: 128.0, color: Colors.green),/// 设置文字Text(data.title, style: TextStyle(color: Colors.yellow, fontSize: 50)),],),),);}
}

运行效果 :

七、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/
Flutter 插件下载地址 : https://pub.dev/packages
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510
Flutter 实战电子书 : https://book.flutterchina.club/chapter1/

重要的专题 :

Flutter 动画参考文档 : https://flutterchina.club/animations/

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_frame ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/16276633 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )相关推荐

【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )
文章目录一.BottomNavigationBar 底部导航栏二.PageView 滑动页面三.BottomNavigationBar 与 PageView 关联四.完整代码示例 1.核心导航 ...
【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
文章目录一.BottomNavigationBar 组件二.BottomNavigationBarItem 组件三.BottomNavigationBar 底部导航栏代码示例四.BottomN ...
android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...
分分钟实现底部导航栏：BottomNavigationBar快速集成
分分钟实现底部导航栏:BottomNavigationBar快速集成 github地址(完整Demo下载) github.com/Ashok-Varma- 一.简介导航栏布局基本很多app都会用到, ...
底部导航栏使用BottomNavigationBar
1.github地址 https://github.com/zhouxu88/BottomNavigationBar 2.基本使用 2,1添加依赖 implementation 'com.ashokv ...
php仿微信底部菜单,Android实现简单底部导航栏 Android仿微信滑动切换效果
Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏 ...
android加号底部导航栏,EasyNavigation Android 底部导航栏████几行代码实现 Tab 导航（随意定制加号，带红点消息提示） @codeKK Android开源站...
几行代码轻松实现底部导航栏(Tab 文字图片高度随意更改): 中间可添加加号按钮,也可添加文字:(足够的属性满足你需要实现的加号样式) 如果还不能满足.中间可添加自定义 View: Tab 中随意添加 ...
Android BottomNavigationBar底部导航控制器的使用（包含默认postion的设置）
转载请标明出处:http://blog.csdn.net/u010046908/article/details/50962081本文出自:[李东的博客] 最近Google在自己推出的Material ...
Android 11.0 SystemUI导航栏固定在底部显示的修改
目录 1.概述 2.SystemUI导航栏固定在底部显示的修改的相关代码

【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )