实现
在Flutter中,底部导航栏是使用BottomNavigationBar组件实现的
BottomNavigationBar
的各个属性的详细介绍:
items
: 必需,表示底部导航栏的选项卡列表,每个选项卡都包含一个图标和一个标签。onTap
: 表示用户点击底部导航栏选项卡时要执行的回调函数。currentIndex
: 表示当前选中的底部导航栏选项卡的索引值,默认为0。elevation
: 表示底部导航栏的阴影高度,默认为8.0。type
: 表示底部导航栏的类型,可以是BottomNavigationBarType.fixed
(固定选项卡数量)或BottomNavigationBarType.shifting
(动态选项卡数量),默认为BottomNavigationBarType.fixed
。(需注意:shifting不支持背景色,设置backgroundColor无效)fixedColor
: 表示选中的选项卡的颜色,仅在type
为BottomNavigationBarType.fixed
时生效。backgroundColor
: 表示底部导航栏的背景色。iconSize
: 表示选项卡图标的大小,默认为24.0。selectedItemColor
: 表示选中的选项卡的图标和标签的颜色。unselectedItemColor
: 表示未选中的选项卡的图标和标签的颜色。selectedIconTheme
: 表示选中的选项卡图标的主题,可以是IconThemeData
类型。unselectedIconTheme
: 表示未选中的选项卡图标的主题,可以是IconThemeData
类型。selectedFontSize
: 表示选中的选项卡标签的字体大小,默认为14.0。unselectedFontSize
: 表示未选中的选项卡标签的字体大小,默认为12.0。selectedLabelStyle
: 表示选中的选项卡标签的样式,可以是TextStyle
类型。unselectedLabelStyle
: 表示未选中的选项卡标签的样式,可以是TextStyle
类型。showSelectedLabels
: 表示是否显示选中的选项卡标签,默认为true
。showUnselectedLabels
: 表示是否显示未选中的选项卡标签,默认为true
。mouseCursor
: 表示鼠标指针悬停在底部导航栏选项卡上时要显示的光标,可以是MouseCursor类型。enableFeedback
: 表示是否启用触觉反馈,默认为true
。landscapeLayout
: 表示底部导航栏在横屏模式下的布局方式,可以是BottomNavigationBarLandscapeLayout
枚举类型。
首先需要定义一个列表,存储不同的页面,这里用几个无状态组件来代替
final List pages = [
const HomePage(),
const ProfilePage(),
const SettingsPage()
];
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const Center(
child: Text('Home Page'),
);
}
}
还需要定义一个_selectedIndex变量,用于跟踪当前选中的底部导航栏选项卡的索引,默认值为0,赋值给BottomNavigationBar.currentIndex,
在BottomNavigationBar.onTap事件中更新_selectedIndex的值
void onTap(int index) {
setState(() {
_selectedIndex = index;
});
}
代码
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MainPage(),
);
}
}
class MainPage extends StatefulWidget {
const MainPage({Key? key}) : super(key: key);
State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
final List pages = [
const HomePage(),
const ProfilePage(),
const SettingsPage()
];
int _selectedIndex = 0;
void onTap(int index) {
setState(() {
_selectedIndex = index;
});
}
Widget build(BuildContext context) {
return Scaffold(
body: pages[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings')
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.orange,
unselectedItemColor: Colors.grey.withOpacity(0.5),
showSelectedLabels: false,
showUnselectedLabels: false,
elevation: 0,
onTap: onTap,
),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const Center(
child: Text('Home Page'),
);
}
}
class ProfilePage extends StatelessWidget {
const ProfilePage({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const Center(
child: Text('Profile Page'),
);
}
}
class SettingsPage extends StatelessWidget {
const SettingsPage({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const Center(
child: Text('Settings Page'),
);
}
}