BottomNavigationBar 常见的属性
| 属性名 | 说明 |
|---|---|
| items | List 底部导航条按钮集合(页面集合) |
| iconSize | icon |
| currentIndex | 默认选中第几个（页面） |
| onTap | 选中变化回调函数（点击后专跳指定页面） |
| fixedColor | 选中的颜色 |
| type | BottomNavigationBarType.fixed BottomNavigationBarType.shifting |
使用过程中几点需要注意的：
BottomNavigationBar用在Scaffold组件下
当底部导航页面超过三个时，必须要添加type属性（BottomNavigationBarType.fixed），否则的话底部导航会全白，看不到效果
items中是一个BottomNavigationBarItem的集合，里面包含图片及文字标签，在视频教程中给的文字使用的是title属性，我在使用时提示被弃用，用烂了替换title
currentIndex是BottomNavigationBar 中的属性，是为底部导航页面编的号，从零开始
我们要改变页面时在onTap中获取点击页面的编号
onTap: (int index) {
setState(() {
currentIndex = index;
});
},
调用setState改变展示的页面
7. body中是我们展示的页面，我们将所有页面放在一个集合中，通过上一步中获取到的下标定位到指定页面
示例：
分类页面（Category.dart）
import 'package:flutter/material.dart';
class CategoryPage extends StatefulWidget {
CategoryPage({Key? key}) : super(key: key);
@override
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage> {
@override
Widget build(BuildContext context) {
return Container(
child: Text("这是分类页面"),
);
}
}
邮件页面（Email.dart）
import 'package:flutter/material.dart';
class EmailPage extends StatefulWidget {
EmailPage({Key? key}) : super(key: key);
@override
_EmailPageState createState() => _EmailPageState();
}
class _EmailPageState extends State<EmailPage> {
@override
Widget build(BuildContext context) {
return Container(
child: Text("这是邮件页面"),
);
}
}
Home页面（Home.dart）
// ignore_for_file: prefer_const_constructors_in_immutables
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return const Text("我是首页组件");
}
}
设置页面(Setting.dart)
// ignore_for_file: prefer_const_literals_to_create_immutables
import 'package:flutter/material.dart';
class SettingPage extends StatefulWidget {
SettingPage({Key? key}) : super(key: key);
@override
_SettingPageState createState() => _SettingPageState();
}
class _SettingPageState extends State<SettingPage> {
@override
Widget build(BuildContext context) {
return ListView(
children: [
ListTile(
title: Text("我是设置页面"),
)
],
);
}
}
整合导航栏的页面(Tabs.dart)
import 'package:flutter/material.dart';
import 'tabs/Category.dart';
import 'tabs/Email.dart';
import 'tabs/Home.dart';
import 'tabs/Setting.dart';
class Tabs extends StatefulWidget {
const Tabs({Key? key}) : super(key: key);
@override
_TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int currentIndex = 0;
List _pageList = [HomePage(), CategoryPage(), SettingPage(), EmailPage()];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter Demo'),
),
body: _pageList[currentIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: currentIndex,
onTap: (int index) {
setState(() {
currentIndex = index;
});
},
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: "首页",
),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: Text("分类")),
BottomNavigationBarItem(icon: Icon(Icons.mail), title: Text("邮件")),
BottomNavigationBarItem(
icon: Icon(Icons.settings), title: Text("设置")),
],
),
),
theme: ThemeData(
primarySwatch: Colors.yellow,
),
);
}
}
在main.dart中运行
// ignore_for_file: prefer_const_constructors, prefer_collection_literals, deprecated_member_use, unused_local_variable, must_be_immutable, prefer_const_literals_to_create_immutables, avoid_print
import 'package:flutter/material.dart';
import 'pages/Tabs.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Tabs();
}
}
文件结构及运行结果如下：
