Flutter的开发过程中，继承了AutomaticKeepAliveClientMixin
并且重载了wantKeepAlive 方法 返回true，甚至super content
但是任然无效，查询过程中发现很多人遇到此问题，所以记录一下
后来发现需配合一些控件才能实现效果 比如PageView ，TabBarView
切换之后就不会丢失当前的状态了，也不会再次调用initstate()方法
主要方法
1：PageController
PageController _pageController;_pageController = PageController(initialPage: this._index, keepPage: true);
2：PageView
PageView( controller: _pageController, children: _eachView, ),
3：控件继承 AutomaticKeepAliveClientMixin 并重载wantKeepAlive 方法
以下是完整代码
import 'package:flutter/material.dart';
import 'package:jxz/widget/my_appbar.dart';
class DemoBottomBarPage extends StatefulWidget {
@override
_DemoBottomBarPageState createState() => _DemoBottomBarPageState();
}
class _DemoBottomBarPageState extends State<DemoBottomBarPage> {
//TabBarView 也可以 但是是 是TabController
PageController _pageController;
List<Widget> _eachView;
int _index = 0;
@override
void initState() {
_eachView = List();
_eachView..add(EachView())..add(EachView2());
this._pageController = PageController(initialPage: this._index, keepPage: true);
super.initState();
}
@override
void dispose() {
//记得要销毁哦
_pageController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: MyAppBar(title: '底部导航'),
floatingActionButton: FloatingActionButton(
//浮动交互按钮
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
return EachView();
}));
},
tooltip: '新建页', //长按提示
backgroundColor: Colors.indigoAccent, //背景颜色
child: Icon(
Icons.add,
color: Colors.white,
)),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
//融合底部工具栏
bottomNavigationBar: BottomAppBar(
color: Colors.indigo,
shape: CircularNotchedRectangle(), //圆形缺口 和 FloatingActionButtonLocation融合
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
color: Colors.white,
onPressed: () {
setState(() {
_index = 0;
_pageController.jumpToPage(_index);
});
},
),
IconButton(
icon: Icon(Icons.person),
color: Colors.white,
onPressed: () {
setState(() {
_index = 1;
_pageController.jumpToPage(_index);
});
},
),
],
),
),
body: PageView(
//禁用横向滑动切换
physics: NeverScrollableScrollPhysics(),
controller: _pageController,
children: _eachView,
),
);
}
}
class EachView extends StatefulWidget {
@override
_EachViewState createState() => _EachViewState();
}
/// 继承 AutomaticKeepAliveClientMixin 保持界面状态
class _EachViewState extends State<EachView> with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 220,
child: TextFormField(
decoration: InputDecoration(labelText: '手机号', hintText: '请输入手机号'),
)));
}
}
class EachView2 extends StatefulWidget {
@override
_EachView2State createState() => _EachView2State();
}
class _EachView2State extends State<EachView2> with AutomaticKeepAliveClientMixin {
@override
bool get wantKeepAlive => true;
List devices = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: devices.length,
itemExtent: 120,
itemBuilder: (_, index) => Card(child: Center(child: Text('当前Item:${index}'))),
);
}
}
网友评论