问题:当你遇到Flutter 切换TabBar时每次会重新渲染界面 并且AutomaticKeepAliveClientMixin(保留界面当前状态:比如) 这个属性没有生效
- 检查App启动入口home->body中:是否使用的PageController
class _RootPageState extends State<RootPage> {
final PageController _controller = PageController(
initialPage: 0,
);
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Container(
child: Scaffold(
bottomNavigationBar: BottomNavigationBar(
onTap: (int index) {
_currentIndex = index;
setState(() {
//刷新
});
_controller.jumpToPage(index);//TabBar跳转
},
selectedFontSize: 12.0,
//设置底部TabBar选中的字体大小
type: BottomNavigationBarType.fixed,
fixedColor: Colors.green,
currentIndex: _currentIndex,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
// icon: Icon(Icons.chat),
icon: Image(
height: 20,
width: 20,
image: AssetImage('images/tabbar_chat.png')),
activeIcon: Image(
height: 20,
width: 20,
image: AssetImage('images/tabbar_chat_hl.png')),
title: Text('微信'),
),
BottomNavigationBarItem(
// icon: Icon(Icons.bookmark),
icon: Image(
height: 20,
width: 20,
image: AssetImage('images/tabbar_friends.png')),
activeIcon: Image(
height: 20,
width: 20,
image: AssetImage('images/tabbar_friends_hl.png')),
title: Text('通讯录'),
),
BottomNavigationBarItem(
// icon: Icon(Icons.history),
icon: Image(
height: 20,
width: 20,
image: AssetImage('images/tabbar_discover.png')),
activeIcon: Image(
height: 20,
width: 20,
image: AssetImage('images/tabbar_discover_hl.png')),
title: Text('发现'),
),
BottomNavigationBarItem(
// icon: Icon(Icons.person_outline),
icon: Image(
height: 20,
width: 20,
image: AssetImage('images/tabbar_mine.png')),
activeIcon: Image(
height: 20,
width: 20,
image: AssetImage('images/tabbar_mine_hl.png')),
title: Text('我'),
),
],
),
body: PageView(
//TabBarController控制器 左右滚动 选中TabBar
// onPageChanged: (int index){
// _currentIndex = index;
// setState(() {//刷新
// });
// },
physics: NeverScrollableScrollPhysics(),//禁止TabBarController 滚动
controller: _controller,
children: <Widget>[
ChatPage(),
FriendsPage(),
DiscoverPage(),
MinePage(),
],
),//pages[_currentIndex]
),
);
}
}
- 界面保留状态设置 (看完下面前三步描述再看下面代码)
第一步在state后面混入AutomaticKeepAliveClientMixin
第二步设置
@override
bool get wantKeepAlive => true; //当有了这个方法之后 只要setState以后就会保留当前的状态
第三步 在 Widget build(BuildContext context) 里面super.build(context);
class _ChatPageState extends State<ChatPage>
with AutomaticKeepAliveClientMixin<ChatPage>{//1.(保留当前界面状态)第一步混入AutomaticKeepAliveClientMixin这个类给_ChatPageState延伸了一些功能 混入之后会让当前部件保留state状态
//1.发送网络请求 定义一个模型数组
List<Chat> _datas = [];
bool _cancelConnect = false;
//2.(保留当前界面状态)第二步保存当前界面状态
@override
bool get wantKeepAlive => true; //当有了这个方法之后 只要setState以后就会保留当前的状态
//初始化对象的时候只调用一次
@override
void initState() {
// TODO: implement initState
super.initState();
//.then是处理返回的数据
getDatas().then((List<Chat> datas) {
if(!_cancelConnect){
//datas 就是返回的数据
setState(() {
_datas = datas;
});
}
}).catchError((error) {
print(error);
}).whenComplete((){
print('该请求完毕');
}).timeout(Duration(seconds: 10)).catchError((timeout){
_cancelConnect = true;
print('超时:${timeout}');
});
// print('来了 getDatas');
}
//Future 类似可选类型 表示接下来的值可能有值也可能有错误
Future<List<Chat>> getDatas() async {
_cancelConnect = false;
//异步请求
final response = await http
.get('http://rap2api.taobao.org/app/mock/224518/api/chat/list');
if (response.statusCode == 200) {
//获取相应数据,并且转换成Map类型
final responseBody = json.decode(response.body);
//转换模型数组
List<Chat> chatList = responseBody['chat_list']
.map<Chat>((item) => Chat.formJson(item))
.toList();
return chatList; //数据返回
} else {
throw Exception('statusCode:${response.statusCode}'); //抛请求异常
}
//print(response.statusCode);
//print(response.body);
}
//返回Item 的
Widget _buildItemForRow(BuildContext context, int index) {
return ListTile(
title: Text(_datas[index].name),
subtitle: Container(
height: 20,
width: 20,
child: Text(
_datas[index].message,
overflow: TextOverflow.ellipsis,
),
),
leading: CircleAvatar(
backgroundImage: NetworkImage(_datas[index].imageUrl),
),
);
}
@override
Widget build(BuildContext context) {
super.build(context);//3.(保留当前界面状态)第三步这个是只有当你保留当前的状态之后才需要在build里面super这句代码
return Scaffold(
appBar: AppBar(
backgroundColor: WeChatThemeColor,
centerTitle: true, //这个是解决安卓机型上导航标题居中显示
title: Text('微信'),
actions: <Widget>[
Container(
margin: EdgeInsets.only(right: 10),
child: PopupMenuButton(
offset: Offset(0, 60.0),
child: Image(
image: AssetImage('images/圆加.png'),
width: 25,
),
itemBuilder: _buildPopupMunuItem,
),
),
], //右侧加号按钮 要加手势点击
),
body: Container(
child: _datas.length == 0
? Center(
child: Text('Loading...'),
)
: ListView.builder(
itemCount: _datas.length,
itemBuilder: _buildItemForRow,
),
),
);
}
}
壮士且慢, 本文提供了完整Flutter项目-微信！！！😊 如果有收获不妨赞一下再走!!!
重磅：
至此：感谢简友的持续关注,决定提供一份完整Flutter项目，关注下面"技高易愁"公众号获取:Flutter项目-微信
请关注"技高易愁"微信公众号.jpg
QQ：522608370
😊 点下赞呗！！！
Flutter （二）布局
Flutter （三） 状态管理
Flutter （四） Map转模型
Flutter （五） 网络请求
Flutter （六） 保留界面状态
Flutter （七） 混合开发 [配置]
Flutter （八） 混合开发 [Flutter完整项目嵌入到原生]
网友评论