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"))
        ],
      )),
    );
  }
}

添加内容圈出来了

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