BottomNavigationBar是底部导航栏,是Scaffold的参数
常用参数:
参数名 | 功能 |
items | List<BottomNavigationBarItem>的集合 |
iconSize | icon大小 |
onTap |
点击事件 |
fixedColor | 选中的颜色 |
type |
BottomNavigationBarType.fixed //配置底部tabs可以有多个按钮(大于3个) BottomNavigationBarType.shifting |
这里用到了StatefulWidget 这个组件是可变组件,里边数据可变,通过setState来渲染数据
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Tabs(),
);
}
}
class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key);
@override
_TabsState createState() {
return _TabsState();
}
}
class _TabsState extends State<Tabs> {
int currentIndex = 0;
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("main"),
),
body: Demo(currentIndex),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
//默认选中第几个 从0开始
currentIndex: currentIndex,
onTap: (int index) {
setState(() {
currentIndex = index;
});
},
iconSize: 30,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: Text("分类")),
BottomNavigationBarItem(
icon: Icon(Icons.settings), title: Text("设置")),
],
),
);
}
}
class Demo extends StatelessWidget {
final count;
const Demo(this.count);
@override
Widget build(BuildContext context) {
if (count == 0) {
return DemoContent("首页");
} else if (count == 1) {
return DemoContent("分类");
} else {
return DemoContent("设置");
}
}
}
class DemoContent extends StatelessWidget {
final title;
const DemoContent(this.title);
@override
Widget build(BuildContext context) {
return Center(
child: Text("$title"),
);
}
}
抽离出来的写法如下:
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/Tabs.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Tabs(),
);
}
}
Tabs.dart
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/Tabs/Category.dart';
import 'package:flutter_app/pages/Tabs/Home.dart';
import 'package:flutter_app/pages/Tabs/Setting.dart';
class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key);
@override
_TabsState createState() {
return _TabsState();
}
}
class _TabsState extends State<Tabs> {
int currentIndex = 0;
List pages = [
HomePage(),SettingPage(),CategoryPage(),
];
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("main"),
),
//将三个页面引入进来 根据索引跳转不同的页面
body: pages[currentIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
//默认选中第几个 从0开始
currentIndex: currentIndex,
onTap: (int index) {
setState(() {
currentIndex = index;
});
},
iconSize: 30,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: Text("分类")),
BottomNavigationBarItem(
icon: Icon(Icons.settings), title: Text("设置")),
],
),
);
}
}
Home.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
@override
_HomePageState createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage> {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Text("Home");
}
}
Category.dart
import 'package:flutter/material.dart';
class CategoryPage extends StatefulWidget {
CategoryPage({Key key}) : super(key: key);
@override
_CategoryPageState createState() {
return _CategoryPageState();
}
}
class _CategoryPageState extends State<CategoryPage> {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Text("Category");
}
}
Setting.dart
import 'package:flutter/material.dart';
class SettingPage extends StatefulWidget {
SettingPage({Key key}) : super(key: key);
@override
_SettingPageState createState() {
return _SettingPageState();
}
}
class _SettingPageState extends State<SettingPage> {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Text("Setting");
}
}