21天学会OpenHarmony跨平台开发 - windows + Flutter【Day8】

昨天把底部导航栏外观完成了，但是点击还不能切换，今天把点击功能添加上，并且完善浏览区。

BottomNavigationBar 组件自带 onTap 方法并自动传入当前点击的 index，需要定义一个存放导航栏按钮索引的变量，在无状态类中添加变量、补充onTap方法即可：

class _MainPageState extends State<MainPage> { // 本节关键代码 // 存放点击索引 int _currentIndex = 0; // 底部导航条定义好了基本不会变，所以声明 final final List<TabListItem> _tabList = [ TabListItem( icon: Icon(Icons.home, color: Colors.grey), activeIcon: Icon(Icons.home, color: Colors.black), text: "首页" ), TabListItem( icon: Icon(Icons.shopping_cart, color: Colors.grey), activeIcon: Icon(Icons.shopping_cart, color: Colors.black), text: "购物车" ), TabListItem( icon: Icon(Icons.person, color: Colors.grey), activeIcon: Icon(Icons.person, color: Colors.black), text: "我的" ), ]; List<BottomNavigationBarItem> _getTabBarWidget() { return List.generate(_tabList.length, (int index) { return BottomNavigationBarItem( icon: _tabList[index].icon, activeIcon: _tabList[index].activeIcon, label: _tabList[index].text, ); }); } @override Widget build(BuildContext context) { return Scaffold( body: Center(child: Text("主页")), bottomNavigationBar: BottomNavigationBar( items: _getTabBarWidget(), // 本节关键代码 onTap: (int index) { _currentIndex = index; setState(() {}); }, currentIndex: _currentIndex, ), ); } }

接下来处理显示区域，显示区域都需要避开屏幕上方挖孔或者刘海，下方要显示内容要避开昨天做得导航栏，以便于完整显示。正好 Flutter 有自动处理这些问题的组件：SafeArea() 用于设置显示安全区域。另外，每个导航功能的页面是堆叠放置，每点击一个导航按钮，把堆叠的页面置顶就可以显示出来了，可以用一个组件处理堆叠：IndexedStack()，把 Scaffold() 下面的 body: Center() 组件替换为 SafeArea() 。

IndexedStack() 里面有一个 children:[] 属性，我们同样用函数来处理子 widget ；再把导航栏点击获取的 index 变量传过来赋值给 index 属性就可以控制页面堆叠显示了。

三个页面，组件比较多，来建立三个目录：Home，Cart，Info，每个目录下面建立 index.dart 每个页面都使用有状态组件，如下：

代码如下：

// 本节关键代码 List<Widget> _getChildren() { return [ HomeView(), CartView(), InfoView(), ]; } @override Widget build(BuildContext context) { return Scaffold( // 本节关键代码 body: SafeArea(child: IndexedStack( index: _currentIndex, // 配合点击传来的 index 变量 children: _getChildren(), )), bottomNavigationBar: BottomNavigationBar( items: _getTabBarWidget(), onTap: (int index) { _currentIndex = index; setState(() {}); }, currentIndex: _currentIndex, ), ); } }

点击导航栏，显示对应页面，完成效果：