Flutter TabBarView状态不持久：编辑内容短暂显示后消失问题排查

我开发了一个用户Profile页面，页面中部包含TabBarView组件，设有3个标签页展示用户数据，其中一个标签页用于显示Bio信息。点击编辑按钮会跳转至新页面输入内容，返回Profile页面后，新的Bio文本仅短暂显示半秒就消失。我尝试了多数方案但无效，仅通过声明全局变量存储输入值并显示的方法可行，希望了解该错误的原因以深入学习Flutter。

Profile页面代码 #

class StudentProfile extends StatefulWidget {
  String id = "";

  StudentProfile(this.id);

  @override
  State<StudentProfile> createState() => _StudentProfileState();
}

class _StudentProfileState extends State<StudentProfile>
    with AutomaticKeepAliveClientMixin<StudentProfile> {
  @override
  Widget build(BuildContext context) {
    studentProfilecreation profile =
        locator.get<localData>().collectionOfstudents[0];
    MediaQueryData queryData;

    queryData = MediaQuery.of(context);
    //for tab bar in the middle to work.
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        backgroundColor: Colors.blue,
        body: Column(children: [
          //to position avatar pic and name, the two containers at top
          Stack(children: [
            Column(children: [
              Container(
                width: double.infinity,
                height: 100,
                decoration: BoxDecoration(color: Colors.blueGrey),
                child: SizedBox(
                    width: double.infinity,
                    height: 100,
                    child: Image.asset(
                        'assets/images/FINAL-FANTASY-VII-REMAKE_20200416212448-1024x576.jpg',
                        fit: BoxFit.fill)),
              ),
              Container(
                  width: double.infinity,
                  height: 125,
                  color: Color.fromARGB(255, 4, 25, 43)),
            ]),
            Positioned(
                top: queryData.size.width * 0.22,
                left: queryData.size.height * 0.02,
                child: SizedBox(
                    height: 125,
                    width: 125,
                    child: CircleAvatar(
                        radius: 0,
                        backgroundColor: const Color.fromARGB(122, 0, 0, 0),
                        child: CircleAvatar(
                          backgroundImage: AssetImage(
                            'assets/images/FINAL-FANTASY-VII-REMAKE_20200416212448-1024x576.jpg',
                          ),
                          radius: 60,
                        )))),
            Positioned(
                left: queryData.size.width * 0.40,
                top: queryData.size.height * 0.18,
                child: Text(profile.firstName + profile.lastName,
                    style: TextStyle(fontSize: 20, color: Colors.white)))
          ]),

          Container(
              //to place the bar inside of the container
              width: double.infinity,
              height: 50,
              decoration: BoxDecoration(
                  border: Border(
                      top: BorderSide(
                          color: Color.fromARGB(22, 255, 255, 255), width: 1))),
              child: AppBar(
                  //the tab names
                  backgroundColor: Colors.black,
                  bottom: TabBar(
                    tabs: const [
                      Tab(text: "Major"),
                      Tab(text: "Id number"),
                      Tab(text: "Classes and\nnotes"),
                      //  Tab(text: "Bio")
                    ],
                    isScrollable: true,
                  ))), //),
          Expanded(
              //will take rest of the screen space, for each tab, the function of that tab will return
              //with singlechildscrollview.
              child: TabBarView(children: [
            MajorInfo(),
            myid(),
            CoursesandNotes(),
            // MajorInfo(),
          ])),
        ]),
      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}

Bio功能代码（注：MajorInfo类实际应为MyBio） #

class MajorInfo extends StatefulWidget {
  MajorInfo({Key? key}) : super(key: key);
  String _major = "";

  @override
  State<MajorInfo> createState() => _Mymajorinfo();
}

class _Mymajorinfo extends State<MajorInfo>
    with AutomaticKeepAliveClientMixin<MajorInfo> {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Column(
      children: [
        ElevatedButton(
            onPressed: () => {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => Material(
                                child: TextField(
                                  onSubmitted: (value) {
                                    setState(() {
                                      widget._major = value;
                                      //_temp = value;
                                    });
                                    ;
                                    Navigator.pop(context);
                                  },
                                ),
                              )))
                },
            child: Text("Edit")),
        Text(widget._major)
      ],
    );
  }
}

1. StatefulWidget实例字段不可变：你直接修改了MajorInfo这个StatefulWidget的_major字段，但Flutter中Widget是不可变的临时对象，框架可能在重建时重新创建MajorInfo实例，导致你设置的_major值被重置为空。
2. TabBarView中组件被重新实例化：StudentProfile的build方法里每次都会创建新的MajorInfo实例（TabBarView(children: [MajorInfo(), ...])），当从编辑页面返回触发StudentProfile重建时，新的MajorInfo会带着初始空值的_major覆盖之前的组件，导致内容消失。
3. 状态存储位置错误：可变状态应该存在State类中，而不是StatefulWidget里。State对象在使用AutomaticKeepAliveClientMixin时会被保留，而Widget实例可能随时被重建。

方案1：将状态移至State类 #

这是最直接的修复方式，把_major字段放到对应的State类中：

class MyBio extends StatefulWidget {
  const MyBio({Key? key}) : super(key: key);

  @override
  State<MyBio> createState() => _MyBioState();
}

class _MyBioState extends State<MyBio> with AutomaticKeepAliveClientMixin<MyBio> {
  String _major = "";

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Column(
      children: [
        ElevatedButton(
          onPressed: () async {
            final inputValue = await Navigator.push<String>(
              context,
              MaterialPageRoute(
                builder: (context) => const Material(
                  child: TextField(
                    decoration: InputDecoration(hintText: "输入Bio内容"),
                  ),
                ),
              ),
            );
            if (inputValue != null) {
              setState(() {
                _major = inputValue;
              });
            }
          },
          child: const Text("编辑"),
        ),
        Text(_major)
      ],
    );
  }
}

方案2：使用状态管理工具 #

如果需要在多个组件间共享Bio数据，建议使用Provider、Riverpod等状态管理库，将状态从组件中剥离出来，避免依赖Widget实例存储数据。

方案3：通过Navigator传递返回值 #

优化编辑页面的返回逻辑，通过Navigator.pop返回输入值，在Bio组件中接收并更新状态，这样能更清晰地处理数据传递。

内容的提问来源于stack exchange，提问作者Edgar Torres