第一步,准备工作
//指示器
int currentIndex = 0;
//定义显示的页面,自备点击的时候所显示的页面
final pages = [TestOne(), TestTwo(), TestThree()];
- 构建bottomNavItem,就是底部的按钮/文字这些东西。
final List<BottomNavigationBarItem> bottomNavItem = [
BottomNavigationBarItem(
icon: Icon(Icons.hail),
label: '首页',
activeIcon: Icon(Icons.handyman_outlined),
),
BottomNavigationBarItem(
icon: Icon(Icons.hail),
label: '中心',
activeIcon: Icon(Icons.handyman_outlined),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: '我的',
activeIcon: Icon(Icons.handyman_outlined),
),
];
第二步:在Scaffold里面,使用bottomNavigationBar
bottomNavigationBar: BottomNavigationBar(
items: bottomNavItem,
onTap: (index) {
setState(() {
this.currentIndex = index;
});
},
currentIndex: currentIndex,
),
第三步,在body部分,将页面我们点击的索引值绑定。
body: pages[currentIndex],
展示完整代码
import 'package:flutter/material.dart';
import 'package:flutter_form_validator/Pages/practice_basic/bottomNavgationBar/test1.dart';
import 'package:flutter_form_validator/Pages/practice_basic/bottomNavgationBar/test2.dart';
import 'package:flutter_form_validator/Pages/practice_basic/bottomNavgationBar/test3.dart';
///@desc BottomNavigationBar
///@author @zhizhizang
///
class BottomNavgationBarPage extends StatefulWidget {
@override
_BottomNavgationBarPageState createState() => _BottomNavgationBarPageState();
}
class _BottomNavgationBarPageState extends State<BottomNavgationBarPage> {
//指示器
int currentIndex = 0;
//定义显示的页面
final pages = [TestOne(), TestTwo(), TestThree()];
//抽离item项
final List<BottomNavigationBarItem> bottomNavItem = [
BottomNavigationBarItem(
icon: Icon(Icons.hail),
label: '首页',
activeIcon: Icon(Icons.handyman_outlined),
),
BottomNavigationBarItem(
icon: Icon(Icons.hail),
label: '中心',
activeIcon: Icon(Icons.handyman_outlined),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: '我的',
activeIcon: Icon(Icons.handyman_outlined),
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('bottomNavigationBar的使用'),
),
body: pages[currentIndex],
bottomNavigationBar: BottomNavigationBar(
items: bottomNavItem,
onTap: (index) {
setState(() {
this.currentIndex = index;
});
},
currentIndex: currentIndex,
),
);
}
}
展示图