- 在main中的代码如下
import 'package:flutter/material.dart';
// 底部Tabbar的widget文件引用
import 'Tabbar/buttom_navigator_widget.dart';
void main(List<String> args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(primarySwatch: Colors.red),
title: '底部导航栏切换',
home: BottomNavigationWidget(),
);
}
}
- 创建Tabbar文件夹，并创建buttom_navigator_widget文件，使用快捷键(stl)创建StatefulWidget代码。可以根据需求创建StatelessWidget 和StatefulWidget不同的widget，切换Tabbar时需要保存currentIndex，所以需要创建有状态管理的widget，代码如下：
import 'package:flutter/material.dart';
//个人中心，记录仪文件的引用
import 'package:tachograph/page/personal_enter.dart';
import 'package:tachograph/page/recorder.dart';
class BottomNavigationWidget extends StatefulWidget {
const BottomNavigationWidget({Key? key}) : super(key: key);
@override
State<BottomNavigationWidget> createState() => _BottomNavigationWidgetState();
}
class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
//用于保存点击的是哪个item
int _currentIndex = 0;
List<Widget> dataList = [];
// 初始化widget数组，添加controller
@override
void initState() {
// TODO: implement initState
dataList.add(Recorder());
dataList.add(Personal_center());
super.initState();
}
@override
Widget build(BuildContext context) {
// 脚手架widget，
return Scaffold(
body: dataList[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
unselectedItemColor: Colors.red, //未选中颜色
selectedItemColor: Colors.green, // 选中颜色
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: Colors.blue,
),
title: Text(
'记录仪',
// style: TextStyle(color: Colors.redAccent),
)),
BottomNavigationBarItem(
icon: Icon(
Icons.mail,
// color: Colors.red,
),
title: Text(
'个人中心',
// style: TextStyle(color: Colors.redAccent),
)),
],
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
// item 点击处理
onTap: (int value) {
setState(() {
_currentIndex = value;
});
},
),
);
}
}
- 创建page文件夹，并创建Personal_center和Recorder文件，代码如下：
import 'package:flutter/material.dart';
class Personal_center extends StatelessWidget {
const Personal_center({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(
"个人中心",
style: TextStyle(color: Colors.red, fontSize: 20),
),
),
);
}
}
import 'package:flutter/material.dart';
class Recorder extends StatelessWidget {
const Recorder({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(
'记录仪',
style: TextStyle(color: Colors.green, fontSize: 20),
),
),
);
}
}
-
运行代码，效果如下：
Simulator Screen Shot - iPhone 8 - 2022-04-16 at 11.35.24.png
Simulator Screen Shot - iPhone 8 - 2022-04-16 at 11.35.28.png
