Flutter 颤振:TabBarView移动到选项卡时也会重建其他选项卡
我使用了Flutter 颤振:TabBarView移动到选项卡时也会重建其他选项卡,flutter,dart,flutter-layout,Flutter,Dart,Flutter Layout,我使用了TabBarView,我注意到了一些非常奇怪的事情。我已经在所有标签的小部件中放置了一些打印消息,以便在滑动标签时获得反馈。我得到了这些结果: 从0->1: 表1称为, 表3称为, 表4称为, 已调用选项卡0 从1->2: 表2称为, 表2称为, 表1称为, 表3称为, 表4称为, 第2页 从2->3: 表1称为, 表3称为, 表4称为, 第2页 从3->4: 表1称为, 表3称为, 第4页 真奇怪。它实际上重建(调用setState)一个选项卡,即使它没有被选中。请记住,只有选项卡
TabBarView
,我注意到了一些非常奇怪的事情。我已经在所有标签的小部件中放置了一些打印消息,以便在滑动标签时获得反馈。我得到了这些结果:
- 从0->1: 表1称为, 表3称为, 表4称为, 已调用选项卡0
- 从1->2: 表2称为, 表2称为, 表1称为, 表3称为, 表4称为, 第2页
- 从2->3: 表1称为, 表3称为, 表4称为, 第2页
- 从3->4: 表1称为, 表3称为, 第4页
setState
)一个选项卡,即使它没有被选中。请记住,只有选项卡0和选项卡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());
}
}
这是因为您正在调用
setState({})
,这意味着您的build
方法将被调用,并且由于所有选项卡都位于同一build
方法中,因此所有选项卡都将被重新创建。为了解决这个问题,您必须:
为TabBarView
使您的StatefulWidget
扩展automatickepaliveclientmixin
(类示例State使用automatickepaliveclientmixin扩展状态
您必须覆盖wantKeepAlive
:@override bool get wantKeepAlive=>true;
调用super.build(context)
作为build
方法的第一行
这将阻止每次我更新帖子时重新构建小部件。不,这不会阻止小部件重新构建。。。
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;
}