BottomNavigationBar 是底部导航条,可以定义底部 Tab 切换,BottomNavigationBar是 Scaffold 组件的参数。
BottomNavigationBar组件属性
属性import 'package:flutter/material.dart';
main() {
runApp(MyApp());
}
//MaterialApp组件作为根组件使用
// Scaffold 有下面几个主要属性
// appBar-界面顶部导航栏 body-界面显示的主要内容Widget drawer-抽屉菜单控件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement buildå
return MaterialApp(
home: Tabs(),
);
}
}
class Tabs extends StatefulWidget {
Tabs({Key key}) : super(key: key);
@override
_TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex=0,
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('导航栏'),
),
body: Text('TabBar'),
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (int index){
setState(() {
this._currentIndex = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("首页")
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text("分类")
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("设置")
)
],
),
);
}
}
- 例子2
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 = 0;
List _pageList = [
HomePage(),
CategoryPage(),
SettingPage(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Demo"),
),
body: this._pageList[this._currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex, //配置对应的索引值选中
onTap: (int index) {
setState(() {
//改变状态
this._currentIndex = index;
});
},
iconSize: 36.0, //icon的大小
fixedColor: Colors.red, //选中的颜色
type: BottomNavigationBarType.fixed, //配置底部tabs可以有多个按钮
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
BottomNavigationBarItem(
icon: Icon(Icons.category), title: Text("分类")),
BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text("设置"))
],
),
);
}
}
- 点击tab,切换的是Scaffold的body 显示的内容;
- tab下面的一级页面,不需要Scaffold
- 一级页面下面的子页面,需要Scaffold,因为要显示导航栏
网友评论