从入门到精通GoogleNavBar 全功能 API 参考手册 【免费下载链接】google_nav_barA modern google style nav bar for flutter.项目地址: https://gitcode.com/gh_mirrors/go/google_nav_barGoogleNavBar是一款为 Flutter 应用设计的现代化谷歌风格底部导航栏组件提供流畅的动画效果和高度可定制的外观。无论你是 Flutter 新手还是经验丰富的开发者这份终极指南将帮助你全面掌握 GoogleNavBar 的所有功能快速构建专业级的移动应用导航界面。 为什么选择 GoogleNavBarGoogleNavBar 不仅外观精美还提供了丰富的自定义选项让你的应用导航栏与众不同谷歌原生风格遵循 Material Design 设计规范流畅动画支持多种动画曲线和持续时间配置高度可定制颜色、边框、阴影、渐变等全方位自定义简单易用几行代码即可实现专业效果完全免费开源 MIT 许可证商业友好 核心组件概览GoogleNavBar 主要由两个核心组件构成1. GNav - 主导航栏容器这是整个导航栏的容器组件负责管理所有标签按钮的布局和交互。2. GButton - 导航按钮每个导航标签都是一个 GButton 实例支持图标、文本和自定义内容。 GNav 完整参数详解参数类型默认值说明tabsListGButton必填导航按钮列表selectedIndexint0当前选中的标签索引onTabChangeValueChangedintnull标签切换回调函数gapdouble0图标和文本之间的间距paddingEdgeInsetsGeometryEdgeInsets.all(25)导航栏内边距activeColorColornull选中状态的图标和文本颜色colorColornull未选中状态的图标颜色rippleColorColorColors.transparent按钮按下时的涟漪效果颜色hoverColorColorColors.transparent按钮悬停时的颜色backgroundColorColorColors.transparent导航栏背景色tabBackgroundColorColorColors.transparent选中标签的背景色tabBorderRadiusdouble100.0标签按钮的圆角半径iconSizedoublenull图标大小textStyleTextStylenull文本样式curveCurveCurves.easeInCubic动画曲线durationDurationDuration(milliseconds: 500)动画持续时间tabBorderBordernull标签按钮边框tabActiveBorderBordernull选中标签的边框tabShadowListBoxShadownull标签按钮阴影效果hapticbooltrue是否启用触觉反馈tabBackgroundGradientGradientnull标签背景渐变效果mainAxisAlignmentMainAxisAlignmentMainAxisAlignment.spaceBetween主轴上按钮的对齐方式styleGnavStyleGnavStyle.google导航栏样式google 或 oldSchooltextSizedoublenull文本大小 GButton 参数配置表参数类型默认值说明iconIconData必填按钮图标textString按钮文本activeboolnull是否处于选中状态iconColorColornull未选中时的图标颜色iconActiveColorColornull选中时的图标颜色textColorColornull文本颜色backgroundColorColornull按钮背景色paddingEdgeInsetsGeometrynull按钮内边距marginEdgeInsetsGeometrynull按钮外边距gapdoublenull图标和文本间距iconSizedoublenull图标大小leadingWidgetnull前置组件如徽章、头像backgroundGradientGradientnull背景渐变效果borderBordernull按钮边框activeBorderBordernull选中时的边框shadowListBoxShadownull按钮阴影onPressedFunctionnull按钮点击回调 快速入门指南步骤 1添加依赖在pubspec.yaml文件中添加依赖dependencies: google_nav_bar: ^5.0.6步骤 2基础使用示例创建一个简单的底部导航栏import package:flutter/material.dart; import package:google_nav_bar/google_nav_bar.dart; import package:line_icons/line_icons.dart; class MyHomePage extends StatefulWidget { override _MyHomePageState createState() _MyHomePageState(); } class _MyHomePageState extends StateMyHomePage { int _selectedIndex 0; override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: GNav( selectedIndex: _selectedIndex, onTabChange: (index) { setState(() _selectedIndex index); }, tabs: [ GButton(icon: LineIcons.home, text: 首页), GButton(icon: LineIcons.heart, text: 收藏), GButton(icon: LineIcons.search, text: 搜索), GButton(icon: LineIcons.user, text: 我的), ], ), ); } } 高级功能展示1. 自定义样式配置GNav( rippleColor: Colors.grey[300]!, hoverColor: Colors.grey[100]!, gap: 8, activeColor: Colors.purple, iconSize: 24, padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12), duration: Duration(milliseconds: 400), tabBackgroundColor: Colors.purple.withOpacity(0.1), color: Colors.black, // ... 其他配置 )2. 添加徽章和自定义内容GButton( icon: LineIcons.heart, text: 消息, leading: Badge( badgeContent: Text(3), child: Icon(LineIcons.heart), ), )3. 渐变背景和边框效果GNav( tabBackgroundGradient: LinearGradient( colors: [Colors.blue, Colors.purple], ), tabBorder: Border.all(color: Colors.grey, width: 1), tabActiveBorder: Border.all(color: Colors.blue, width: 2), tabShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.5), blurRadius: 8, ) ], ) 样式模式对比GoogleNavBar 提供两种不同的样式模式Google 风格(GnavStyle.google)现代 Material Design 设计流畅的动画过渡图标和文本同时显示Old School 风格(GnavStyle.oldSchool)传统导航栏样式更简洁的布局适合需要简约设计的应用 最佳实践建议1.保持一致性在整个应用中保持导航栏样式的一致性提升用户体验。2.合理使用动画快速应用使用较短的动画持续时间300-500ms强调型应用可以使用更长的动画效果700-900ms3.颜色搭配技巧使用主题色作为activeColor未选中状态使用中性色背景色应与应用整体设计协调4.响应式设计padding: MediaQuery.of(context).size.width 600 ? EdgeInsets.symmetric(horizontal: 40, vertical: 15) : EdgeInsets.symmetric(horizontal: 20, vertical: 12), 常见问题解答Q: 如何禁用触觉反馈GNav( haptic: false, // 禁用触觉反馈 // ... 其他配置 )Q: 如何自定义单个按钮的样式GButton( icon: LineIcons.home, text: 首页, backgroundColor: Colors.blue, // 单独设置背景色 iconActiveColor: Colors.white, // 单独设置激活颜色 // ... 其他配置 )Q: 如何实现页面切换onTabChange: (index) { setState(() _selectedIndex index); // 使用 PageController 或 Navigator 进行页面切换 _pageController.jumpToPage(index); },️ 调试技巧启用调试模式可以查看布局边界GNav( debug: true, // 启用调试模式 // ... 其他配置 ) 项目文件结构参考了解项目结构有助于深入定制主库文件:lib/google_nav_bar.dart核心组件:lib/src/gnav.dart(GNav 实现)按钮组件:lib/src/gbutton.dart(GButton 实现)基础按钮:lib/src/button.dart(底层按钮实现)示例代码:example/lib/目录包含多个使用示例 总结GoogleNavBar 是 Flutter 开发者的强大工具它提供了✅ 完整的谷歌风格导航栏实现✅ 丰富的自定义选项✅ 流畅的动画效果✅ 简单的 API 设计✅ 活跃的社区支持通过本指南你已经掌握了 GoogleNavBar 的所有核心功能。现在就开始使用这个强大的组件为你的 Flutter 应用打造专业级的导航体验吧提示: 更多高级用法和实际案例请查看项目中的示例代码文件。【免费下载链接】google_nav_barA modern google style nav bar for flutter.项目地址: https://gitcode.com/gh_mirrors/go/google_nav_bar创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考