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 判断状态,动态切换样式。
相关推荐
YueYaTech3 小时前
【Flutter 必备插件】屏幕适配方案 flutter_screenutil
flutter
耳東陈4 小时前
【重磅发布】Flutter 生态首个可商用 K线图表库flutter_chen_kchart
flutter
程序员老刘5 小时前
AI智能体正在颠覆App开发,不转型就淘汰
flutter·客户端·mcp
worxfr6 小时前
Flutter 入门指南:从基础到实战
flutter
yuanlaile6 小时前
Flutter Android打包学习指南
android·flutter·flutter打包·flutter android
sunly_11 小时前
Flutter:上传图片,选择相机或相册:wechat_assets_picker
数码相机·flutter·微信
_Shirley11 小时前
安卓开发使用Android Studio配置flutter环境
android·flutter·android studio
张风捷特烈11 小时前
Flutter 百题斩#16 | 收集 SDK 所有 Widget 组件基本信息
android·flutter