页面:有3个底部标签 使用BottomNavigationBarItem实现
需求1:每次切换标签时需要刷新页面数据
需求2:进入页面时一次将3个页面的数据都加载完成
需求1 解决方法:
body 使用:_children[页面序号]
例:body: _children[widget.currentIndex],
class Home extends StatefulWidget {
int currentIndex;
Home({Key key, this.currentIndex = 0}) : super(key:key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
final List<Widget> _children = [Home1(), Home2(), Home3()];
final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('标签1', style: TextStyle(fontSize: 14),),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('标签2', style: TextStyle(fontSize: 14),),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('标签3', style: TextStyle(fontSize: 14),),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('标签4', style: TextStyle(fontSize: 14),),
),
];
@override
Widget build(BuildContext context) {
return new Scaffold(
bottomNavigationBar:BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: onTabTapped,
currentIndex: widget.currentIndex,
items: _list,
),
//重点
body: _children[widget.currentIndex],
);
}
void onTabTapped(int index) {
setState(() {
widget.currentIndex = index;
});
}
}
需求2 :解决方法
body使用: IndexedStack(index: 页面序号, children: 页面列表,),
例: body: IndexedStack(
index: widget.currentIndex,
children: _children,
),
class Home extends StatefulWidget {
int currentIndex;
Home({Key key, this.currentIndex = 0}) : super(key:key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
final List<Widget> _children = [Home1(), Home2(), Home3()];
final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('标签1', style: TextStyle(fontSize: 14),),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('标签2', style: TextStyle(fontSize: 14),),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('标签3', style: TextStyle(fontSize: 14),),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('标签4', style: TextStyle(fontSize: 14),),
),
];
@override
Widget build(BuildContext context) {
return new Scaffold(
bottomNavigationBar:BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: onTabTapped,
currentIndex: widget.currentIndex,
items: _list,
),
//重点
body: IndexedStack(
index: widget.currentIndex,
children: _children,
),
);
}
void onTabTapped(int index) {
setState(() {
widget.currentIndex = index;
});
}
}