BottomNavigationBarType
时间: 2024-05-20 14:07:27 浏览: 10
BottomNavigationBarType是Flutter中的一个枚举类型,用于配置底部导航栏的样式。它有两个取值:fixed和shifting。
1. fixed:表示底部导航栏的按钮数量固定,一般适用于按钮数量较少的情况(小于等于3个)。每个按钮都会显示图标和文本,并且选中的按钮会突出显示。
2. shifting:表示底部导航栏的按钮数量可以多于3个,按钮的样式会根据选中状态发生变化。未选中的按钮只显示图标,选中的按钮会显示图标和文本,并且选中的按钮会突出显示。
以下是一个演示示例:
```dart
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("BottomNavigationBar Demo"),
),
body: Center(
child: Text("当前选中的页面是:$_currentIndex"),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.shifting,
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: "首页",
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: "搜索",
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: "个人中心",
),
],
),
);
}
}
void main() {
runApp(MaterialApp(
home: MyHomePage(),
));
}
```
这个示例演示了一个底部导航栏,其中有3个按钮,使用了shifting类型的BottomNavigationBar。当点击不同的按钮时,页面中心的文本会显示当前选中的页面索引。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)