效果：
/**
* Flutter BottomNavigationBar 自定义底部导航条、以及实现页面切换：
* BottomNavigationBar是底部导航条，可以让我们定义底部Tab切换，
* bottomNavigationBar是Scaffold组件的参数。
*BottomNavigationBar常见的属性：
items List<BottomNavigationBaritem> 底部导航条按钮集合。
iconSize icon
currentIndex 默认选中第几个
onTap 选中变化回调函数
fixedColor 选中的颜色
type
BottomNavigationBarType.fixed
BottomNavigationBarType.shifting
*/
main.dart
import 'package:flutter/material.dart';
import 'pages/Tabs.dart'; void main() {
runApp(MyApp());
} class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Tabs(),
);
}
}
pages/Tabs.dart
import 'package:flutter/material.dart';
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';
class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key);
_TabsState createState() => _TabsState();
} class _TabsState extends State<Tabs> {
int _currentIndex = ;
List _pageList=[
HomePage(),
CategoryPage(),
SettingPage()
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (int index) {
// print(index);
setState(() {
this._currentIndex = index;
});
},
iconSize: 36.0,
type: BottomNavigationBarType.fixed,
fixedColor: Colors.red,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: Text('分类')),
BottomNavigationBarItem(
icon: Icon(Icons.settings), title: Text('设置')),
]),
body: this._pageList[this._currentIndex],
);
}
}
pages/tabs/Home.dart
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Text('首页'),
);
}
}
pages/tabs/Category.dart
import 'package:flutter/material.dart';
class CategoryPage extends StatelessWidget {
const CategoryPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Text('分类')
);
}
}
pages/tabs/Setting.dart
import 'package:flutter/cupertino.dart';
class SettingPage extends StatelessWidget {
const SettingPage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Text('设置'),
);
}
}
