我使用TabBarView
,我注意到一些非常奇怪的事情。我在所有标签的小部件中放了一些打印消息,以便在刷标签时有反馈。我得到了这些结果:
- 从0 -〉1:Tab 1已呼叫,Tab 3已呼叫,Tab 4已呼叫,Tab 0已呼叫。
- 从1 -〉2:Tab 2呼叫Tab 2呼叫Tab 1呼叫Tab 3呼叫Tab 4呼叫Tab 2呼叫
- 从2 -〉3:第1章,第3章,第4章,第2章。
- 3 -〉4:Tab 1呼叫Tab 3呼叫Tab 4呼叫
真的很奇怪。它实际上重建(调用setState
)一个标签,即使它没有被选中。请记住,只有Tab 0和Tab 2有实际的内容,其他的都是空的容器。
下面是我的代码:
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
final AuthService _authService = AuthService();
final colors = [
Colors.red,
Colors.lightGreen,
Colors.blue,
Colors.amber,
Colors.deepPurpleAccent
];
Color scaffoldColor = Colors.red;
TabController _controller;
@override
void initState() {
super.initState();
_controller = TabController(vsync: this, length: 5);
_controller.addListener(() {
if (_controller.indexIsChanging) {
print("index is changing");
} else {
setState(() {
scaffoldColor = colors[_controller.index];
});
}
});
_controller.index = 1;
}
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 5,
child: Scaffold(
backgroundColor: scaffoldColor,
appBar: AppBar(
backgroundColor: scaffoldColor,
leading: IconButton(
icon: Icon(Icons.menu),
color: Colors.white,
onPressed: () {},
),
elevation: 0,
title: Text(
'HOME Screen',
style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
),
actions: [
FlatButton.icon(
onPressed: () async {
await _authService.signOut();
},
icon: Icon(Icons.exit_to_app),
label: Text('Log out'),
),
],
bottom: TabBar(
isScrollable: true,
controller: _controller,
indicatorWeight: 6,
indicatorColor: Colors.transparent,
tabs: <Widget>[
Tab(
child: Container(
child: Text(
'Chats',
style: TextStyle(
color:
_controller.index == 0 ? Colors.white : Colors.grey,
fontSize: 18),
),
),
),
Tab(
child: Container(
child: Text(
'Online',
style: TextStyle(
color:
_controller.index == 1 ? Colors.white : Colors.grey,
fontSize: 18),
),
),
),
Tab(
child: Container(
child: Text(
'Discover',
style: TextStyle(
color:
_controller.index == 2 ? Colors.white : Colors.grey,
fontSize: 18),
),
),
),
Tab(
child: Container(
child: Text(
'NULL',
style: TextStyle(
color:
_controller.index == 3 ? Colors.white : Colors.grey,
fontSize: 18),
),
),
),
Tab(
child: Container(
child: Text(
'NULL2',
style: TextStyle(
color:
_controller.index == 4 ? Colors.white : Colors.grey,
fontSize: 18),
),
),
),
],
),
),
body: TabBarView(
controller: _controller,
children: <Widget>[
Column(
children: <Widget>[
//CategorySelector(),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).accentColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: Column(
children: <Widget>[
FavoriteContacts4(),
RecentChats(),
],
),
),
),
],
),
Tab1(),
Column(
children: <Widget>[
//CategorySelector(),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).accentColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
child: SuggestedUsers(),
),
),
],
),
Tab3(),
Tab4(),
],
),
),
);
}
Widget tmpWidget(int i) {
print("Tab " + i.toString() + " is called");
return Text("Number" + i.toString());
}
}
这真的很烦人,因为每次我切换(或几乎)到另一个选项卡时,它都会调用tab 2中的API。我想这和控制器有关!
**更新:**即使我已经把AutomaticKeepAliveClientMixin
到我的每一个Statefull
标签小部件,有将被重建.例如,当我从标签3滑动到标签4时,所有的标签都将被重建。表1,2,3,4所有。
下面是我为Tab 1,3和4写的代码。选项卡0和2有其他小部件,但作用相同。
class Tab1 extends StatefulWidget {
@override
_Tab1State createState() => _Tab1State();
}
class _Tab1State extends State<Tab1> with AutomaticKeepAliveClientMixin {
@override
Widget build(BuildContext context) {
super.build(context);
print("Tab 1 Has been built");
return Text("TAB 1");
}
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
}
2条答案
按热度按时间oiopk7p51#
这是因为你正在调用
setState({})
,这意味着你的build
方法将被调用,因为所有的tabs
都在同一个build
方法中,所以它们都将被重新创建。为了解决这个问题,你必须:1.为
TabBarView
的每个子节点创建StatefulWidget
1.将您的
StatefulWidget
扩展为AutomaticKeepAliveClientMixin
(class ExampleState extends State<Example> with AutomaticKeepAliveClientMixin
1.你必须覆盖
wantKeepAlive
:@override bool get wantKeepAlive => true;
1.在
build
方法的第一行调用super.build(context)
这将防止每次重新构建小部件
yshpjwxd2#
将DefaultTabController放在StatefulBuilder中,并让所有TabBarView子部件实现AutomaticKeepAliveClientMixin对我来说很有效。