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
判断状态,动态切换样式。