Flutter解决TabBar顶部页面切换导致页面重载问题

问题描述

写蓝牙程序时，使用到了顶部Tab的切换，但是切换过程中读取到的内容会被重置。影响体验。

解决方法

看的该博主的方法

借鉴博主链接

1、保证自己使用的是动态的StatefulWidget
2、状态继承AutomaticKeepAliveClientMixin
3、重写get wantKeepAlive方法，并返回true

代码展示

1、父页面代码展示

import 'package:flutter/material.dart';
import 'package:tabbarsaveinfo/tabs/mypage1.dart';
import 'package:tabbarsaveinfo/tabs/mypage2.dart';import 'mypage3.dart';class MyHomePage extends StatefulWidget {const MyHomePage({super.key});@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(//appBar: AppBar(),body: DefaultTabController(length: 3,child: Scaffold(appBar: AppBar(title: Text("tabs Demo"),bottom: const TabBar(tabs: [Tab(text: "page1",),Tab(text: "page2",),Tab(text: "page3",),]),),body: TabBarView(children: [MyPage1(),MyPage2(),MyPage3(),]),),),);}
}

2、子页面代码展示

import 'package:flutter/material.dart';class MyPage1 extends StatefulWidget {const MyPage1({super.key});@overrideState<MyPage1> createState() => _MyPage1State();
}class _MyPage1State extends State<MyPage1> with AutomaticKeepAliveClientMixin {TextEditingController _controller = TextEditingController();@overridebool get wantKeepAlive => true;void add() {setState(() {_controller.text = 10.toString();});}@overrideWidget build(BuildContext context) {return Container(child: Center(child: Column(children: [Center(child: Text("第1页面的内容"),),TextField(controller: _controller,),ElevatedButton(onPressed: () {add();},child: Text("按钮1"))],)),);}
}

添加内容圈出来了

每一个tab页面都需要加上这些内容，有几个页面加几个。