Flutter基础(前端教程①①-底部导航栏)

1. 主页面(BottomNavBarPage)
  • _currentBarIndex 记录当前选中的导航索引(默认 0,即首页)。
  • IndexedStack 管理 4 个页面,通过 _currentBarIndex 控制显示哪个页面(比如索引 1 就显示 NodePage)。
  • 底部导航栏用 CustomNavigationBar 组件,传递当前索引和点击回调。
2. 底部导航栏(CustomNavigationBar)
  • 定义了 4 个导航项(NavItem),每个包含标题、图标、是否选中(isHighlighted)。
  • 通过 Row 横向排列 4 个导航项,每个占满屏幕宽度的 1/4(Expanded 组件实现)。
  • 点击导航项时,触发 onTap 回调,更新 _currentBarIndex 切换页面。
3. 导航项样式(选中 / 未选中)
  • 未选中状态_buildIconContainer):灰色图标,无背景。
  • 选中状态_buildHighlightedIconContainer):白色图标,带渐变绿色椭圆形背景(有边框),文字也变为亮绿色。
  • 通过 isHighlighted 判断状态,动态切换样式。
相关推荐
奋斗的小青年!!43 分钟前
Flutter跨平台开发适配OpenHarmony:下拉刷新组件的实战优化与深度解析
flutter·harmonyos·鸿蒙
摘星编程1 小时前
Flutter for OpenHarmony 实战:CustomScrollView 自定义滚动视图详解
android·javascript·flutter
摘星编程2 小时前
Flutter for OpenHarmony 实战:GridView.builder 构建器网格详解
flutter
绝命三郎2 小时前
Flutter坑坑
flutter
消失的旧时光-19433 小时前
BLoC 从 0 到 1:先理解“状态机”,再谈 Flutter
flutter·bloc
小雨下雨的雨3 小时前
Flutter鸿蒙共赢——秩序与未知的共鸣:彭罗斯瓷砖在鸿蒙律动中的数字重构
flutter·华为·重构·交互·harmonyos·鸿蒙系统
行者963 小时前
Flutter适配OpenHarmony:个人中心
flutter·harmonyos·鸿蒙
小雨下雨的雨3 小时前
Flutter鸿蒙共赢——生命之痕:图灵图样与反应-扩散方程的生成美学
分布式·flutter·华为·交互·harmonyos·鸿蒙系统
摘星编程3 小时前
Flutter for OpenHarmony 实战:Dialog 对话框详解
flutter·wpf
LawrenceLan4 小时前
Flutter 零基础入门(十三):late 关键字与延迟初始化
开发语言·前端·flutter·dart