Flutter: Default Tab Bar Controller does not maint

问题:

I am writing an application in flutter that has 4 tabbed views, kinda like the stock android phone app or clock app. One of those views hash a floating action button that when pressed will add some text in a list. However, when I scroll to one of the other views and come back, all of the text is gone. Is there a way to fix this?

Here is my code:

import 'package:flutter/material.dart';
import 'Screens/Dashboard.dart';
import 'Screens/CreateQuestionnaire.dart';
import 'Screens/AccountScreen.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
 createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  final primaryColour = const Color(0xFF5CA1CA);
  final secondaryColour = const Color(0xFFC36B42);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new DefaultTabController(
        length: 4,
        child: new Scaffold(
          appBar: new AppBar(
            actions: <Widget>[
              new IconButton(icon: new Icon(Icons.account_circle),
              onPressed: (){
                Navigator.push(context, new MaterialPageRoute(builder: (context) => new AccountScreen()));
              }),
            ],
            bottom: new TabBar(
              tabs: <Widget>[
                new Tab(icon: new Icon(Icons.home)),
                new Tab(icon: new Icon(Icons.contacts)),
                new Tab(icon: new Icon(Icons.description)),
                new Tab(icon: new Icon(Icons.settings))
              ],
            ),
            title: new Text("NLPro Questionnaire"),
          ),
          body: new TabBarView(
            children: <Widget>[
              new Dashboard(),
              new CreateQuestionnaire(),
              new Text("Surveys"),
              new Text("Settings")
            ],
          ),
        ),
      ),
      theme:new ThemeData(
        primaryColor: primaryColour,
        accentColor: secondaryColour,
      ),
    );
  }
}

enter image description here

回答1:

You need to use AutomaticKeepAliveClientMixin over your stateful widget and implement override method called wantKeepAlive

class MyApp extends StatefulWidget {
@override
createState() => new MyAppState();
}

use AutomaticKeepAliveClientMixin with your class extending state and ov

class MyAppState extends State<MyApp> with AutomaticKeepAliveClientMixin<MyApp>{

//your existing code.....

@override
bool get wantKeepAlive => true;   //by default it will be null, change it to true.

//your existing code......

}

on setting wantKeepAlive to true, initState method will run only once, at the time of creation.

回答2:

Variables in Flutter that are created inside a Stateful widget are updated weithin the change of the state. The state changes when you go to another view and then back. So what you can do is to define two variables. A temporary one that is just for the layout and one that is kept a little longer in storage. Pseudo Code:

var globalVar;
Stateful Widget...
var _temp;
setState({_temp=yourData; globalVar=yourData})
doSomethingWithYourText(_temp != null ? _temp : globalVar)

While you use the _temp var for all layout updates. The globalVar changes will not be noticable until the State resets (you change to another view).

So what this does is save your data in two vars and check wether the State was used before. If not it uses the var that was saved earlier.

回答3:

You need to use PageStorage widget and PageStoageBucket and wrap your page inside a PageStorage widget.

Please refer to this tutorial for more details:
Persisting UI State and Building Bottom Navigation Bars in Dart's Flutter Framework

回答4:

class _RepoInfoState extends State<RepoInfo> with AutomaticKeepAliveClientMixin {

  @override
  bool get wantKeepAlive => true; // Note here

  @override
  Widget build(BuildContext context) {
    super.build(context); // Note here

    return Text('嘿');
  }

}