setState()
- state.setState()会触发该节点及以下整个子树更新
- 动态变化的Widget的判定条件,应该显式的出现在该State的build()方法中,使得Widget树可以清晰的感知变化
BottomNavigationBar
系统自带的底部导航栏
currentIndex
标识当前选中的角标
currentIndex: 0,
items
设置底部导航的item,类型固定为BottomNavigationBarItem
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "主页"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "品类"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
]
onTap
item的点击响应事件
onTap: (int value) {
/**
* 调用此方式实现界面刷新
* */
setState(() {
this.currentIndex = value;
});
}
示例
class MyStateApp extends StatefulWidget {
@override
_MyStateAppState createState() => _MyStateAppState();
}
class _MyStateAppState extends State<MyStateApp> {
//记录当前界面的角标
int currentIndex = 0;
//包含所有界面的数组
List<Widget> pageList = [HomePage(), CategoryPage(), SettingPage()];
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('MyStateApp'),
),
//动态设置body的显示
body: pageList[currentIndex],
//设置底部导航栏
bottomNavigationBar: BottomNavigationBar(
currentIndex: this.currentIndex,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "主页"),
BottomNavigationBarItem(icon: Icon(Icons.category), label: "品类"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
],
//底部导航的点击事件 value: 点击的item的角标
onTap: (int value) {
/**
* 调用此方式实现界面刷新
* */
setState(() {
this.currentIndex = value;
});
},
),
),
//定义主题样式
theme: ThemeData(primarySwatch: Colors.blue),
);
}
}
/****************************下方三个代码块为独立文件,易于维护拓展*****************************/
//首页
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Container(
child: Text("首页"),
);
}
}
//品类
class CategoryPage extends StatefulWidget {
@override
_CategoryPageState createState() => _CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage> {
@override
Widget build(BuildContext context) {
return Container(
child: Text("品类"),
);
}
}
//设置界面
class SettingPage extends StatefulWidget {
@override
_SettingPageState createState() => _SettingPageState();
}
class _SettingPageState extends State<SettingPage> {
@override
Widget build(BuildContext context) {
return Container(
child: Text("设置"),
);
}
}