Flutter解决TabBar顶部页面切换导致页面重载问题
目录
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});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget 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});
@override
State<MyPage1> createState() => _MyPage1State();
}
class _MyPage1State extends State<MyPage1> with AutomaticKeepAliveClientMixin {
TextEditingController _controller = TextEditingController();
@override
bool get wantKeepAlive => true;
void add() {
setState(() {
_controller.text = 10.toString();
});
}
@override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Column(
children: [
Center(
child: Text("第1页面的内容"),
),
TextField(
controller: _controller,
),
ElevatedButton(
onPressed: () {
add();
},
child: Text("按钮1"))
],
)),
);
}
}添加内容圈出来了
