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 判断状态,动态切换样式。
相关推荐
末代iOS程序员华仔3 小时前
Guideline 5.6 - Developer Code of Conduct
flutter·ios·swift
恋猫de小郭4 小时前
聊个比较有意思的 Flutter Web 问题
android·前端·flutter
2501_915918414 小时前
Flutter项目配置iOS混淆的详细步骤与工具推荐
android·flutter·ios·小程序·uni-app·cocoa·iphone
天空之城--5 小时前
过去一周Android行业动态:编码技术与综合趋势精选
android·flutter·性能优化·kotlin·android jetpack
Flutter OH1 天前
Flutter OH平台 DFX 问题定位导航
flutter
恋猫de小郭1 天前
AI 时代,也许你的 Flutter 需要一套 Dartastic OpenTelemetry 监控
android·前端·flutter
等....1 天前
Flutter创建
flutter
Privasa-隐私实验室1 天前
跨端技术选型|Flutter搭建隐私加密App,安卓与iOS双端差异适配实战
android·笔记·安全·flutter·ios·隐私安全·aes-256
Flutter OH2 天前
Flutter OH 外接纹理问题定位指南
flutter
未来猫咪花2 天前
Everything is ViewModel:让状态管理回到对象世界
android·flutter·ios