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

问题描述

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

解决方法

看的该博主的方法

借鉴博主链接

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

代码展示

1、父页面代码展示

csharp 复制代码
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、子页面代码展示

csharp 复制代码
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页面都需要加上这些内容,有几个页面加几个。

相关推荐
正在学习前端的---小方同学9 小时前
vue-easy-tree树状结构
前端·javascript·vue.js
键盘不能没有CV键12 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
不吃凉粉14 小时前
Android Studio USB串口通信
android·ide·android studio
zhangphil14 小时前
android studio设置大内存,提升编译速度
android·android studio
你的人类朋友14 小时前
【Node】认识multer库
前端·javascript·后端
编程乐学15 小时前
安卓非原创--基于Android Studio 实现的天气预报App
android·ide·android studio·课程设计·大作业·天气预报·安卓大作业
可触的未来,发芽的智生16 小时前
新奇特:黑猫警长的纳米世界,忆阻器与神经网络的智慧
javascript·人工智能·python·神经网络·架构
大熊的瓜地16 小时前
Android automotive 框架
android·android car
前端开发爱好者17 小时前
尤雨溪官宣:"新玩具" 比 Prettier 快 45 倍!
前端·javascript·vue.js
欧阳呀17 小时前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui