flutter开发实战-实现自定义bottomNavigationBar样式awesome_bottom_bar

flutter开发实战-实现自定义bottomNavigationBar样式awesome_bottom_bar

在开发过程中，需要自定义bottomNavigationBar样式，可以自定义实现，这里使用的是awesome_bottom_bar库

在这里插入图片描述

一、awesome_bottom_bar

在pubspec.yaml中引入awesome_bottom_bar

awesome_bottom_bar: ^1.2.2

二、实现自定义bottomNavigationBar

切换界面使用PageView.builder

PageView 是一个非常重要的组件。比如大多数 App 都包含 Tab 换页效果、图片轮动以及抖音上下滑页切换视频功能等等都可以使用PageView来实现

PageView({Key? key,this.scrollDirection = Axis.horizontal, // 滑动方向this.reverse = false,PageController? controller,this.physics,List<Widget> children = const <Widget>[],this.onPageChanged,//每次滑动是否强制切换整个页面，如果为false，则会根据实际的滑动距离显示页面this.pageSnapping = true,//主要是配合辅助功能用的，后面解释this.allowImplicitScrolling = false,//后面解释this.padEnds = true,
})

切换界面使用PageView.builder，当点击不同的tab时候，可以使用PageController进行切换

PageView.builder(itemBuilder: (BuildContext context, int index) {return KeepAliveWrapper(child: subMainPages[index], keepAlive: true);},itemCount: subMainPages.length,controller: _pageController,physics: NeverScrollableScrollPhysics(),onPageChanged: (index) {_selectedIndex = index;_animationControllerList[_selectedIndex!].forward();_animationControllerList[_lastSelectedIndex!].reverse();},),),

使用默认效果的bottomNavigationBar

bottomNavigationBar: BottomBarDefault(items: buildTabItems(context),backgroundColor: Colors.white,color: Colors.black87,colorSelected: Colors.amber,indexSelected: _selectedIndex,duration: Duration(milliseconds: 200),onTap: (int index) => setState(() {_lastSelectedIndex = _selectedIndex;_pageController.jumpToPage(index);}),),

当需要特殊样式的bottomNavigationBar，时候，比如如下点击后会突出的三角形样式

bottomNavigationBar: BottomBarInspiredInside(items: [TabItem(icon: Icons.home_outlined,title: S.of(context).home,),TabItem(icon: Icons.qr_code_scanner_outlined,title: S.of(context).qrScan,),TabItem(icon: Icons.nature_outlined,title: S.of(context).mine,count: Container(padding: EdgeInsets.all(3.0),decoration: BoxDecoration(border: Border.all(color: Colors.white,width: 1.0,style: BorderStyle.solid,),color: Colors.red,borderRadius: BorderRadius.all(Radius.circular(20.0),),// gradient: LinearGradient(//   begin: Alignment.topLeft,//   end: Alignment.bottomRight,//   colors: [//     Colors.red.withOpacity(0.5),//     Colors.red.withOpacity(0.3),//     Colors.red.withOpacity(1.0),//   ],// ),),child: Text("99",style: TextStyle(fontSize: 10,color: Colors.white,fontWeight: FontWeight.w500),),),)],backgroundColor: Colors.lightBlue,color: Colors.white,colorSelected: Colors.white,indexSelected: _selectedIndex,duration: Duration(milliseconds: 200),onTap: (int index) => setState(() {_pageController.jumpToPage(index);}),itemStyle: ItemStyle.hexagon,chipStyle:const ChipStyle(isHexagon: true, background: Colors.blueAccent),),

完整实例代码如下

class MainTabNavigator extends StatefulWidget {const MainTabNavigator({Key? key}) : super(key: key);@overrideState<MainTabNavigator> createState() => _MainTabNavigatorState();
}class _MainTabNavigatorState extends State<MainTabNavigator>with TickerProviderStateMixin {PageController _pageController = PageController();int _selectedIndex = 0;late DateTime _lastPressed;List<Widget> subMainPages = [];late List<AnimationController> _animationControllerList;late List<Animation<double>> _animationList;int? _lastSelectedIndex = 0;@overridevoid initState() {// 设置默认的subMainPages = mainPages;super.initState();_animationControllerList = List<AnimationController>.empty(growable: true);_animationList = List<Animation<double>>.empty(growable: true);for (int i = 0; i < subMainPages.length; ++i) {_animationControllerList.add(AnimationController(duration: Duration(milliseconds: 200), vsync: this));_animationList.add(Tween(begin: 0.0, end: 5.0).chain(CurveTween(curve: Curves.ease)).animate(_animationControllerList[i]));}WidgetsBinding.instance.addPostFrameCallback((_) {_animationControllerList[_selectedIndex!].forward();});}void animationDispose() {for (int i = 0; i < subMainPages.length; ++i) {_animationControllerList[i].dispose();}}@overridevoid dispose() {// TODO: implement disposeanimationDispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(resizeToAvoidBottomInset: false,body: WillPopScope(onWillPop: () async {if (_lastPressed == null ||DateTime.now().difference(_lastPressed) > Duration(seconds: 1)) {//两次点击间隔超过1秒则重新计时_lastPressed = DateTime.now();return false;}return true;},child: PageView.builder(itemBuilder: (BuildContext context, int index) {return KeepAliveWrapper(child: subMainPages[index], keepAlive: true);},itemCount: subMainPages.length,controller: _pageController,physics: NeverScrollableScrollPhysics(),onPageChanged: (index) {_selectedIndex = index;_animationControllerList[_selectedIndex!].forward();_animationControllerList[_lastSelectedIndex!].reverse();},),),// bottomNavigationBar: BottomBarDefault(//   items: buildTabItems(context),//   backgroundColor: Colors.white,//   color: Colors.black87,//   colorSelected: Colors.amber,//   indexSelected: _selectedIndex,//   duration: Duration(milliseconds: 200),//   onTap: (int index) => setState(() {//     _lastSelectedIndex = _selectedIndex;//     _pageController.jumpToPage(index);//   }),// ),bottomNavigationBar: BottomBarInspiredInside(items: [TabItem(icon: Icons.home_outlined,title: S.of(context).home,),TabItem(icon: Icons.qr_code_scanner_outlined,title: S.of(context).qrScan,),TabItem(icon: Icons.nature_outlined,title: S.of(context).mine,count: Container(padding: EdgeInsets.all(3.0),decoration: BoxDecoration(border: Border.all(color: Colors.white,width: 1.0,style: BorderStyle.solid,),color: Colors.red,borderRadius: BorderRadius.all(Radius.circular(20.0),),// gradient: LinearGradient(//   begin: Alignment.topLeft,//   end: Alignment.bottomRight,//   colors: [//     Colors.red.withOpacity(0.5),//     Colors.red.withOpacity(0.3),//     Colors.red.withOpacity(1.0),//   ],// ),),child: Text("99",style: TextStyle(fontSize: 10,color: Colors.white,fontWeight: FontWeight.w500),),),)],backgroundColor: Colors.lightBlue,color: Colors.white,colorSelected: Colors.white,indexSelected: _selectedIndex,duration: Duration(milliseconds: 200),onTap: (int index) => setState(() {_pageController.jumpToPage(index);}),itemStyle: ItemStyle.hexagon,chipStyle:const ChipStyle(isHexagon: true, background: Colors.blueAccent),),// bottomNavigationBar: FlashyTabBar(//   selectedIndex: _selectedIndex,//   showElevation: true,//   onItemSelected: (index) => setState(() {//     _pageController.jumpToPage(index);//   }),//   items: [//     FlashyTabBarItem(//       icon: Icon(Icons.home_outlined),//       title: Text(S.of(context).home),//     ),//     FlashyTabBarItem(//       icon: Icon(Icons.qr_code_scanner_outlined),//       title: Text(S.of(context).qrScan),//     ),//     FlashyTabBarItem(//       icon: Icon(Icons.nature_outlined),//       title: Text(S.of(context).mine),//     ),//   ],// ),      // bottomNavigationBar: BottomNavigationBar();}List<TabItem> buildTabItems(BuildContext context) {TabItem homeItem = TabItem(icon: Icons.home_outlined,title: S.of(context).home,count: buildTabItem(context, 0),);TabItem qsItem = TabItem(icon: Icons.qr_code_scanner_outlined,title: S.of(context).qrScan,count: buildTabItem(context, 1),);TabItem discoveryItem = TabItem(icon: Icons.location_searching_outlined,title: S.of(context).discovery,count: buildTabItem(context, 2),);TabItem mineItem = TabItem(icon: Icons.nature_outlined,title: S.of(context).mine,count: buildTabItem(context, 3),);return [homeItem, qsItem, discoveryItem, mineItem];}Widget buildTabItem(BuildContext context, int index) {return AnimatedBuilder(animation: _animationList[index],builder: (BuildContext context, Widget? child) {return Container(margin: EdgeInsets.only(top: _animationList[index].value,),child: child,);},child: buildTabItemCount(context),);}Widget buildTabItemCount(BuildContext context) {return Container(padding: const EdgeInsets.all(3.0),decoration: BoxDecoration(border: Border.all(color: Colors.white,width: 1.0,style: BorderStyle.solid,),color: Colors.red,borderRadius: const BorderRadius.all(Radius.circular(30.0),),// gradient: LinearGradient(//   begin: Alignment.topLeft,//   end: Alignment.bottomRight,//   colors: [//     Colors.red.withOpacity(0.5),//     Colors.red.withOpacity(0.3),//     Colors.red.withOpacity(1.0),//   ],// ),),child: const Text("99",style: TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.w500),),);}
}

三、小结

flutter开发实战-自定义bottomNavigationBar样式。

https://blog.csdn.net/gloryFlow/article/details/132761946

学习记录，每天不停进步。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/103164.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

es滚动查询分析和使用步骤

es滚动查询分析和使用步骤

ES在进行普通的查询时&#xff0c;默认只会查询出来10条数据。我们通过设置es中的size可以将最终的查询结果从10增加到10000。如果需要查询数据量大于es的翻页限制或者需要将es的数据进行导出又当如何&#xff1f; Elasticsearch提供了一种称为"滚动查询"&#xff08…
阅读更多...
探索Apache Hive：融合专业性、趣味性和吸引力的数据库操作奇幻之旅

探索Apache Hive：融合专业性、趣味性和吸引力的数据库操作奇幻之旅

文章目录 版权声明一 数据库操作二 Hive数据表操作2.1 表操作语法和数据类型2.2 Hive表分类2.3 内部表Vs外部表2.4 内部表操作2.4.1 创建内部表2.4.2 其他创建内部表的形式2.4.3 数据分隔符2.4.4 自定义分隔符2.4.5 删除内部表 2.5 外部表操作2.5.1 创建外部表2.5.2 操作演示2.…
阅读更多...
Jmeter进阶使用指南-分布式测试

Jmeter进阶使用指南-分布式测试

当你需要模拟大量并发用户并测试应用程序的性能时&#xff0c;JMeter的分布式测试功能非常有用。分布式测试允许你使用多个JMeter实例来模拟并发用户&#xff0c;从而提供更高的负载。 下面是一个详细的介绍和讲解分布式测试的步骤&#xff1a; 准备主机和从机&#xff1a; 首…
阅读更多...
QT 插件化图像算法软件架构

QT 插件化图像算法软件架构

为什么要做插件化软件架构&#xff1f; 通过 结构化、模块化、松耦合、高内聚、插件化&#xff0c;有助于提升软件开发效率。 1、通过结构化、模块化、插件化方式的软件设计与开发&#xff0c;减少重复开发、重复测试、重复BUG修复&#xff0c;从而提高开发效率、提升代码质量…
阅读更多...
flask bootstrap页面json格式化

flask bootstrap页面json格式化

html <!DOCTYPE html> <html lang"en"> <head><!-- 新 Bootstrap5 核心 CSS 文件 --> <link rel"stylesheet" href"static/bootstrap-5.0.0-beta1-dist/css/bootstrap.min.css"><!-- 最新的 Bootstrap5 核心 …
阅读更多...
算法通关村17关 | 透析跳跃游戏

算法通关村17关 | 透析跳跃游戏

1. 跳跃游戏 题目 LeetCode55 给定一个非负整数数组&#xff0c;最初位于数组的第一个位置&#xff0c;数组中的每个元素代表你再该位置可以跳跃的最大长度&#xff0c;判断你是否能够达到最后一个位置。 思路 如果当前位置元素如果是3&#xff0c;我们无需考虑是跳几步&#…
阅读更多...
【HTTP爬虫ip实操】智能路由构建高效稳定爬虫系统

【HTTP爬虫ip实操】智能路由构建高效稳定爬虫系统

在当今信息时代&#xff0c;数据的价值越来越受到重视。对于许多企业和个人而言&#xff0c;网络爬取成为了获取大量有用数据的关键手段之一。然而&#xff0c;在面对反爬机制、封锁限制以及频繁变动的网站结构时&#xff0c;如何确保稳定地采集所需数据却是一个不容忽视且具挑…
阅读更多...
【前端】CSS-Grid网格布局

【前端】CSS-Grid网格布局

目录 一、grid布局是什么二、grid布局的属性三、容器属性1、display①、语句②、属性值 2、grid-template-columns属性、grid-template-rows属性①、定义②、属性值1&#xff09;、固定的列宽和行高2&#xff09;、repeat()函数3&#xff09;、auto-fill关键字4&#xff09;、f…
阅读更多...
Redis多机数据库实现

Redis多机数据库实现

Redis多机数据库实现 为《Redis设计与实现》笔记 复制 客户端可以使用SLAVEOF命令将指定服务器设置为该服务器的主服务器 127.0.0.1:12345> SLAVEOF 127.0.0.1 6379127.0.0.1:6379将被设置为127.0.0.1:123456的主服务器 旧版复制功能的实现 Redis的复制功能分为同步&a…
阅读更多...
OpenHarmony：如何使用HDF驱动控制LED灯

OpenHarmony：如何使用HDF驱动控制LED灯

一、程序简介 该程序是基于OpenHarmony标准系统编写的基础外设类&#xff1a;RGB LED。 目前已在凌蒙派-RK3568开发板跑通。详细资料请参考官网&#xff1a;https://gitee.com/Lockzhiner-Electronics/lockzhiner-rk3568-openharmony/tree/master/samples/b02_hdf_rgb_led。 …
阅读更多...
【计算机基础知识8】深入理解OSI七层模型

【计算机基础知识8】深入理解OSI七层模型

目录 一、前言 二、OSI七层模型概述 三、第一层&#xff1a;物理层 四、第二层&#xff1a;数据链路层 五、第三层&#xff1a;网络层 六、第四层&#xff1a;传输层 七、第五层&#xff1a;会话层 八、第六层&#xff1a;表示层 九、第七层&#xff1a;应用层 十、O…
阅读更多...
QT QFrame控件使用详解

QT QFrame控件使用详解

本文详细的介绍了QFrame控件的各种操作&#xff0c;例如&#xff1a;设置框架形状、设置框架阴影、设置线宽、中间线宽、设置框架样式、设置大小策略、设置样式表、其它文章等等操作。 实际开发中&#xff0c;一个界面上可能包含十几个控件&#xff0c;手动调整它们的位置既费时…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023