flutter开发实战-底部bottomNavigationBar➕PageView

flutter开发实战-底部bottomNavigationBar

tabbar在app中非常常见，底部BottomNavigationBar属性

在这里插入图片描述

一、BottomNavigationBar属性

BottomNavigationBar组件的常用属性：

type：tabbar样式，默认为白色不显示；
fixedColor:tabbar选中颜色；
currentIndex:当前选中的Item的index
selectedFontSize：选中的title的size （默认14.0）
unselectedFontSize：未选中的title的size （默认12.0）
backgroundColor：背景色
iconSize：icon图片的size （默认是24.0）
items

二、代码实现

这里我代码进行了拆分。

2.1、main_sub_pages.dart代码

main_sub_pages.dart

List<Widget> mainPages = <Widget>[HomePage(),QrScanEntryPage(),MinePage(),
];List<String> mainRouterNames = <String>[RouterName.home,RouterName.scanEntry,RouterName.mine,
];

2.2、main_tab_navigator.dart代码

main_tab_navigator.dart

// 在MainTabNavigator中，使用到了PageView.builder

PageView 是一个非常重要的组件，因为在移动端开发中很常用，比如大多数 App 都包含 Tab 换页效果、图片轮动以及抖音上下滑页切换视频功能等等

class MainTabNavigator extends StatefulWidget {const MainTabNavigator({Key? key}) : super(key: key);@overrideState<MainTabNavigator> createState() => _MainTabNavigatorState();
}class _MainTabNavigatorState extends State<MainTabNavigator> {PageController _pageController = PageController();int _selectedIndex = 0;late DateTime _lastPressed;List<Widget> subMainPages = [];@overridevoid initState() {// 检查app更新checkAppUpdate();// 设置默认的subMainPages = mainPages;super.initState();}void checkAppUpdate() {}@overrideWidget build(BuildContext context) {return Scaffold(resizeToAvoidBottomInset: false,body: WillPopScope(onWillPop: () async {if (_lastPressed == null ||DateTime.now().difference(_lastPressed) > Duration(seconds: 1)) {//两次点击间隔超过1秒则重新计时_lastPressed = DateTime.now();return false;}return true;},child: PageView.builder(itemBuilder: (BuildContext context, int index) {return KeepAliveWrapper(child: subMainPages[index], keepAlive: true);},itemCount: subMainPages.length,controller: _pageController,physics: NeverScrollableScrollPhysics(),onPageChanged: (index) {setState(() {_selectedIndex = index;});},),),bottomNavigationBar: BottomNavigationBar(type: BottomNavigationBarType.fixed,items: <BottomNavigationBarItem>[BottomNavigationBarItem(icon: Icon(Icons.home_outlined),label: S.of(context).home,),BottomNavigationBarItem(icon: Icon(Icons.qr_code_scanner_outlined),label: S.of(context).qrScan,),BottomNavigationBarItem(icon: Icon(Icons.nature_outlined),label: S.of(context).mine,),],currentIndex: _selectedIndex,onTap: (index) {_pageController.jumpToPage(index);},),);}
}

2.2、main_page.dart代码

main_page.dart

class MainPage extends StatefulWidget {const MainPage({Key? key}) : super(key: key);@overrideState<MainPage> createState() => _MainPageState();
}class _MainPageState extends State<MainPage> {@overrideWidget build(BuildContext context) {return Scaffold(body: MainTabContainer(),);}
}class MainTabContainer extends StatefulWidget {const MainTabContainer({Key? key}) : super(key: key);@overrideState<MainTabContainer> createState() => _MainTabContainerState();
}class _MainTabContainerState extends State<MainTabContainer> {@overrideWidget build(BuildContext context) {return MainTabNavigator();}
}

2.3、在App入口页面设置

return MaterialApp(theme: ThemeData(fontFamily: "PingFang SC",primarySwatch: themeModel.theme,),navigatorKey: OneContext().key,debugShowCheckedModeBanner: false,supportedLocales: S.delegate.supportedLocales,locale: localeModel.getLocale(),initialRoute: RouterName.main,	// 默认mainonGenerateRoute: RouterManager.generateRoute,
);

这里在router_manager配置main

class RouterManager {// ignore: missing_returnstatic Route<dynamic> generateRoute(RouteSettings settings) {LoggerManager().debug("generateRoute: ${settings}, name:${settings.name}");switch (settings.name) {case RouterName.agreement:{return NoAnimRouteBuilder(const ProtocolAgreementPage());}break;case RouterName.main:{return NoAnimRouteBuilder(const MainPage());}break;default:return MainTabNavigator();}}
}