[移动开发]Flutter开发之——底部导航栏BottomNavigationBar

一 底部导航栏效果图

模式	首页	关系图	导航页	关于我
Fixed
Shifting

二 BottomNavigationBar详解

2.1 BottomNavigationBar介绍

• BottomNavigationBar是Scaffold脚手架中的位于底部的一个组件
• BottomNavigationBar位于body的下方，属于底部导航栏
• BottomNavigationBar包含多个BottomNavigationBarItem，BottomNavigationBarItem用于设置显示图标和文字
• 点击BottomNavigationBarItem，切换到BottomNavigationBarItem对应的页面

2.2 BottomNavigationBar和BottomNavigationBarItem

BottomNavigationBar

  BottomNavigationBar({
    Key? key,
    required this.items,
    this.onTap,
    this.type,
    this.currentIndex = 0,
    Color? fixedColor,
    this.backgroundColor,
    this.iconSize = 24.0,
    Color? selectedItemColor,
    this.unselectedItemColor,
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
  })

BottomNavigationBarItem

const BottomNavigationBarItem({
    required this.icon,
    this.label,
    Widget? activeIcon,
    this.backgroundColor,
    this.tooltip,
  })

三 页面切换相关知识点

3.1 PageView

什么是PageView

• PageView类似于Android中的Viewpager，可以做垂直或水平滑动
• 通过children，创建一个可滚动视图列表
• 构造PageView时，需要传入一个PageController(页面控制器)
• 页面切换时调用onPageChanged方法，切换页面显示

PageView构造方法

PageView({
    Key? key,
    this.scrollDirection = Axis.horizontal,
    this.reverse = false,
    PageController? controller,
    this.physics,
    this.pageSnapping = true,
    this.onPageChanged,
    List<Widget> children = const <Widget>[],
  })

3.2 PageController-属性和方法说明

四 示例项目

4.1 项目结构

4.2 项目代码

main

void main()=>runApp(GetMaterialApp(
    getPages: [
      GetPage(name: '/', page: ()=>IndexWidget(),binding: IndexBinding())
    ]
));

IndexWidget

class IndexWidget extends StatelessWidget{
  IndexController controller=Get.find<IndexController>();
  @override
  Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: Text('BottomNavigationBar'),),
     bottomNavigationBar: _buildBottomNavigationBar(),
     body: _buildPageView(),
   );
  }

  Widget _buildBottomNavigationBar(){
    return Obx(()=>BottomNavigationBar(
        items: controller.bottomTabs,
        currentIndex: controller.currentPage,
        type: BottomNavigationBarType.fixed,
        // fixedColor: Colors.red,
        selectedFontSize: 16,
        unselectedFontSize: 13,
        onTap:  (int index) => controller.switchBottomTabBar(index),
       ));
  }
  /// 内容页
  Widget _buildPageView() {
    return PageView(
      //禁止滑动
      //physics: const NeverScrollableScrollPhysics(),
      children: controller.tabPageBodies,
      controller: controller.pageController,
      onPageChanged: (index) => controller.onPageChanged(index),
    );
  }
}

IndexBinding

class IndexBinding implements Bindings{
  @override
  void dependencies() {
    Get.lazyPut(() => IndexController());
  }
}

IndexController

class IndexController extends GetxController{
  /// 响应式成员变量，默认位置指引0
  final _currentPage = 0.obs;
  set currentPage(index) => _currentPage.value = index;
  get currentPage => _currentPage.value;


  /// PageView页面控制器
  late PageController pageController;
  //Page页面集合
  late List<Widget> tabPageBodies;
  /// 底部BottomNavigationBarItem
  late List<BottomNavigationBarItem> bottomTabs;


  switchBottomTabBar(int index) {
   //点击底部BottomNavigationBarItem切换PageView页面
    //pageController.animateToPage(index,duration: Duration(seconds: 1),curve: Curves.fastLinearToSlowEaseIn);
    pageController.jumpToPage(index);
  }

  onPageChanged(int index) {
    currentPage = index;
  }
  /// 在Widget内存中分配后立即调用，可以用它来初始化initialize一些东西
  @override
  void onInit() {
    super.onInit();
    pageController = PageController(initialPage: currentPage);
    bottomTabs=const <BottomNavigationBarItem>[
      BottomNavigationBarItem(backgroundColor: Colors.orange,icon: Icon(Icons.home_outlined,size: 20,),activeIcon:Icon(Icons.home,size: 25) ,label: 'home'),
      BottomNavigationBarItem(backgroundColor: Colors.green,icon: Icon(Icons.account_tree_outlined,size: 20,),activeIcon:Icon(Icons.account_tree,size: 25) ,label: 'Tree'),
      BottomNavigationBarItem(backgroundColor: Colors.red,icon: Icon(Icons.navigation_outlined,size: 20,),activeIcon:Icon(Icons.navigation,size: 25) ,label: 'Navigator'),
      BottomNavigationBarItem(backgroundColor: Colors.deepOrange,icon: Icon(Icons.person_outline,size: 20,),activeIcon:Icon(Icons.person,size: 25) ,label: 'Me'),
    ];

    tabPageBodies = <Widget>[
      HomeWidget(),
      TreeWidget(),
      NavigatorWidget(),
      MeWidget()
    ];
  }

}

HomeWidget

class HomeWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Home'));
  }

}

TreeWidget

class TreeWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return Center(child: Text('Tree'));
  }

}

NavigatorWidget

class NavigatorWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Navigator'));
  }

}

MeWidget

class MeWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Me'));
  }
}

五 参考

CSDN-参考代码

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖