flutter实现底部导航栏 flutter实现底部导航栏

本文实例为大家分享了flutter实现底部导航栏的具体代码，供大家参考，具体内容如下
一.flutter底部导航栏常用组件BottomNavigationBar 属性介绍

BottomNavigationBar({Key? key,required this.items, //必填项，设置各个按钮this.onTap, //点击事件this.currentIndex = 0, //当前选中item下标this.elevation, //控制阴影高度this.type, //BottomNavigationBarType，默认 fixed，设置为 shifting 时，需要设置选中样式，和未选中样式，提供一个特殊动画Color? fixedColor, //选中 item 填充色this.backgroundColor, //整个BottomNavigationBar 背景色this.iconSize = 24.0, //图标大小Color? selectedItemColor, //选中title填充色this.unselectedItemColor, //未选中title填充色this.selectedIconTheme, //选中item图标主题this.unselectedIconTheme, //未选中item图标主题this.selectedFontSize = 14.0, //选中title字体大小this.unselectedFontSize = 12.0, //未选中title字体大小this.selectedLabelStyle, //选中title样式 TextStylethis.unselectedLabelStyle, //未选中title样式 TextStylethis.showSelectedLabels, //是否展示选中title，默认为truethis.showUnselectedLabels, //是否展示未选中title，默认为truethis.mouseCursor, //鼠标悬停this.enableFeedback,this.landscapeLayout,})

二.BottomNavigationBar的具体实现
1.创建四个页面，分别为，首页，通讯录，发现和我的，这里以homepage.dart为例,其他页面只需要修改对应内容显示即可，eg:

import 'package:flutter/material.dart'; class HomePage extends StatefulWidget{ const HomePage({Key? key}) : super(key: key); @overrideState createState()=>_HomePageState(); } class _HomePageState extends State{ @overrideWidget build(BuildContext context) {return const Center(child: Text("主页",style:TextStyle(color: Colors.black,fontSize: 20),),); } }

2.添加BottomNavigationBar，需要在主页中实现BottomNavigationBar，eg:

import 'package:flutter/material.dart'; import 'findpage.dart'; import 'mypage.dart'; import 'contactpage.dart'; import 'homepage.dart'; class MainPage extends StatefulWidget{const MainPage({Key? key}) : super(key: key); @overrideState createState()=>_MainPageState(); } class _MainPageState extends State{ var allPages=[HomePage(),ContactPage(),FindPage(),MyPage()]; var currentIndex=0; @overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("导航栏",style: TextStyle(color: Colors.black,fontSize: 30,),textAlign: TextAlign.center,),),body: allPages[currentIndex],backgroundColor: Colors.green,bottomNavigationBar: BottomNavigationBar(currentIndex: currentIndex,type: BottomNavigationBarType.fixed,unselectedItemColor: Colors.grey,selectedItemColor: Colors.blue,/*unselectedLabelStyle:TextStyle(color: Colors.black),*/items: [BottomNavigationBarItem(icon: Icon(Icons.home),label: "首页",//backgroundColor:Colors.blue), BottomNavigationBarItem(icon: Icon(Icons.person),label: "通讯录",//backgroundColor:Colors.blue), BottomNavigationBarItem(icon: Icon(Icons.find_in_page),label: "发现",//backgroundColor:Colors.blue), BottomNavigationBarItem(icon: Icon(Icons.flip_outlined),label: "我的",//backgroundColor:Colors.blue),], onTap: (index){setState(() {print("the index is :$index"); currentIndex=index; }); },),); }}

三.实际效果展示，eg: