一、基础使用
Flutter 底部导航栏的基础使用非常简单。我们可以通过 BottomNavigationBar 组件来创建一个底部导航栏，然后在其中添加多个 BottomNavigationBarItem 组件来表示不同的功能模块。下面是一个基础使用的代码示例：
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State
{
int _selectedIndex = 0;
static const List
_widgetOptions =
[
Text(
'Index 0: Home',
),
Text(
'Index 1: Business',
),
Text(
'Index 2: School',
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const
[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
);
}
}
在这个例子中，我们创建了一个有三个功能模块的底部导航栏，分别为“Home”、“Business”和“School”，对应的是三个 Text 组件。当用户点击不同的 BottomNavigationBarItem 时，会触发 _onItemTapped 方法并更新当前选中的模块。
二、自定义样式
除了基础使用外，Flutter 底部导航栏还支持自定义样式。我们可以通过 BottomNavigationBar 组件中的属性来改变它的外观和交互。下面是一些常见的自定义样式：
1. 更改选中状态颜色
默认情况下，底部导航栏中选中状态的文字和图标颜色是主题色。我们可以通过 selectedItemColor 属性将其改变为其他颜色：
bottomNavigationBar: BottomNavigationBar(
// ...
selectedItemColor: Colors.red,
),
2. 更改未选中状态颜色
和选中状态颜色类似，我们也可以通过 unselectedItemColor 属性将未选中状态的文字和图标颜色改变为其他颜色：
bottomNavigationBar: BottomNavigationBar(
// ...
unselectedItemColor: Colors.grey,
),
3. 更改图标大小
将 BottomNavigationBarItem 组件中的 icon 属性改为一个 SizedBox 组件，然后设置它的 width 和 height 属性即可更改图标的大小：
bottomNavigationBar: BottomNavigationBar(
// ...
items:
[
BottomNavigationBarItem(
icon: SizedBox(
width: 24,
height: 24,
child: Image.asset('images/home.png'),
),
label: 'Home',
),
// ...
],
),
4. 更改背景色
我们可以通过设置 BottomNavigationBar 组件的 backgroundColor 属性来更改它的背景色：
bottomNavigationBar: BottomNavigationBar(
// ...
backgroundColor: Colors.white,
),
三、扩展使用
除了基础使用和自定义样式以外，Flutter 底部导航栏还有一些其它的扩展使用方式。下面是一些常见的扩展使用方式：
1. 使用 BottomAppBar
除了 BottomNavigationBar 组件以外，我们还可以使用 BottomAppBar 组件来创建底部导航栏。BottomAppBar 组件通常和 FloatingActionButton 组件一起使用，可以实现类似于浮动操作按钮的效果。下面是一个代码示例：
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State
{
int _selectedIndex = 0;
static const List
_widgetOptions =
[
Text(
'Index 0: Home',
),
Text(
'Index 1: Business',
),
Text(
'Index 2: School',
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Increment',
child: Icon(Icons.add),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children:
[
IconButton(
icon: Icon(Icons.home),
onPressed: () {
_onItemTapped(0);
},
),
IconButton(
icon: Icon(Icons.business),
onPressed: () {
_onItemTapped(1);
},
),
SizedBox(width: 40),
IconButton(
icon: Icon(Icons.school),
onPressed: () {
_onItemTapped(2);
},
),
],
),
),
);
}
}
在这个例子中，我们创建了一个使用 BottomAppBar 组件的底部导航栏，并添加了一个巨大的浮动操作按钮。 BottomAppBar 组件的 shape 属性指定了它的形状，这里我们使用了一个圆形的凹槽形状，用于放置浮动操作按钮。 BottomAppBar 组件中的 Row 组件包含了多个 IconButton 组件，并通过 MainAxisAlignment.spaceBetween 来使它们能够水平排列。此外，bottomNavigationBar 引用了 BottomAppBar 组件，而不是 BottomNavigationBar 组件。
2. 使用 CupertinoTabBar
在 iOS 风格的应用程序中，底部导航栏通常是使用 CupertinoTabBar 组件来创建的。下面是一个使用 CupertinoTabBar 组件的代码示例：
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State
{
int _selectedIndex = 0;
static const List
_widgetOptions =
[
Text(
'Index 0: Home',
),
Text(
'Index 1: Business',
),
Text(
'Index 2: School',
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: CupertinoNavigationBar(
middle: Text(widget.title),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: CupertinoTabBar(
items: const
[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
);
}
}
在这个例子中，我们使用了 CupertinoNavigationBar 组件作为 AppBar 组件，并使用了 CupertinoTabBar 组件作为底部导航栏。与 BottomNavigationBar 组件相比，CupertinoTabBar 组件更加简洁和现代化。
四、总结
本文详细介绍了 Flutter 底部导航栏的基础使用、自定义样式和扩展使用方式，分别从多个方面详细阐述了它的设计和使用方法。通过深入了解 Flutter 底部导航栏的使用，我们可以更好地设计出优秀的用户界面，并提升用户体验。
