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 判断状态,动态切换样式。
相关推荐
叽哥2 小时前
flutter学习第 14 节:动画与过渡效果
android·flutter·ios
想想肿子会怎么做4 小时前
Flutter 环境安装
前端·flutter
叽哥5 小时前
flutter学习第 13 节:本地存储
android·flutter·ios
来来走走1 天前
Flutter SharedPreferences存储数据基本使用
android·flutter
zeqinjie1 天前
回顾 24年 Flutter 骨架屏没有释放 CurvedAnimation 导致内存泄漏的血案
前端·flutter·ios
tangweiguo030519871 天前
Flutter Provider 状态管理全面解析与实战应用:从入门到精通
flutter
猪哥帅过吴彦祖1 天前
Flutter SizeTransition:让你的UI动画更加丝滑
android·flutter
张风捷特烈1 天前
鸿蒙纪·Flutter卷#02 | 已有 Flutter 项目鸿蒙化 · 3.27.4 版
android·flutter·harmonyos
TralyFang1 天前
Flutter 导致Positioned的不断重构问题
flutter
鹏多多1 天前
flutter-使用SafeArea组件处理各机型的安全距离
前端·flutter·客户端