在小部件的多次调用之间保留变量的值

Question

我有三页。第三页获取文本输入，并将其传递到第二页的文本小部件。当第二页关闭并再次打开时，先前的数据将丢失。我想保存数据，即使关闭页面也是如此。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You are welcome',style: (TextStyle(fontWeight: FontWeight.bold, fontSize: 15,color: Colors.black)),
            ),
            RaisedButton.icon(
              label: Text("Go to second page",style: (TextStyle(fontWeight: FontWeight.bold, fontSize: 18,color: Colors.white)),),
              icon: Icon(Icons.pages),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SecondPage()),
                );
              },
              color: Colors.red,

            ),
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  String _information = 'No Information Yet';

  void updateInformation(String information) {
    setState(() => _information = information);
  }

  void moveToSecondPage() async {
    final information = await Navigator.push(
      context,
      CupertinoPageRoute(
          fullscreenDialog: true, builder: (context) => ThirdPage()),
    );
    updateInformation(information);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
                _information,style: (TextStyle(fontWeight: FontWeight.bold, fontSize: 15,color: Colors.black))
            ),
            SizedBox(
              height: 8.0,
            ),
            RaisedButton(
              color: Colors.purple,
              child: Text(
                'Get Information',
                style: TextStyle(color: Colors.white),
              ),
              onPressed: () {
                moveToSecondPage();
              },
            )
          ],
        ),
      ),
    );
  }
}


class ThirdPage extends StatelessWidget {
  final TextEditingController textController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextField(
                  autofocus: true,
                  style: TextStyle(fontSize: 20.0),
                  controller: textController,
                ),
              ),
              SizedBox(
                height: 8.0,
              ),
              RaisedButton(
                child: Text(
                  'Submit',
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.blue,
                onPressed: () {
                  Navigator.pop(context, textController.text);
                },
              )
            ],
          )),
    );
  }
}

Answer 1

在小部件的多次调用之间保留变量的值

创建模型

在这种情况下，您可以做的是创建一个不同的类（模型）具有（静态）信息字符串，然后将其导入第二页。这样，整个项目中只有一个实例。

通过将字符串设为静态，您可以访问它而无需创建实例对象。

class Information extends ChangeNotifier {

    static String _information = 'Default Value';

    get information {
        // Any aditional functionality
        return _information;
    }

    set setInformation (String value) {
        // Any additional functinality
        _information = value;
        notifyListeners();
    }

}

使用模型

您将必须使用更改通知程序提供程序提供此信息。

您将必须包装要在其中使用信息的小部件消费者小部件。点击她获取更多信息 click here to learn more about statemanagement

您可以将getter和setter当作类的成员来使用

您可以通过写信访问信息

Information.information;

并通过书写设置信息

Information.setInfromation ='新信息';

我希望这会有所帮助。

Answer 2

您的问题已经asked多次。答案取决于您。这是一个state management问题。这是一个非常大的领域，您需要了解并选择一种状态管理解决方案，然后将其应用于您的应用。

但是，您可以使用包装器类，映射和全局变量在页面之间传递状态。不建议这样做，因为它会随着应用程序的增长而引起问题。这是一种使用wrapper class在页面之间传递字符串值的解决方案。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class InformationWrapper {
  String data = 'No Information Yet';
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  InformationWrapper _information = InformationWrapper();
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You are welcome',
              style: (TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 15,
                  color: Colors.black)),
            ),
            RaisedButton.icon(
              label: Text(
                "Go to second page",
                style: (TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                    color: Colors.white)),
              ),
              icon: Icon(Icons.pages),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => SecondPage(
                            information: widget._information,
                          )),
                );
              },
              color: Colors.red,
            ),
          ],
        ),
      ),
    );
  }
}

class SecondPage extends StatefulWidget {
  final InformationWrapper information;

  const SecondPage({Key key, this.information}) : super(key: key);
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  void updateInformation(String information) {
    setState(() => widget.information.data = information);
  }

  void moveToSecondPage() async {
    final information = await Navigator.push(
      context,
      CupertinoPageRoute(
          fullscreenDialog: true, builder: (context) => ThirdPage()),
    );
    updateInformation(information);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(widget.information.data,
                style: (TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15,
                    color: Colors.black))),
            SizedBox(
              height: 8.0,
            ),
            RaisedButton(
              color: Colors.purple,
              child: Text(
                'Get Information',
                style: TextStyle(color: Colors.white),
              ),
              onPressed: () {
                moveToSecondPage();
              },
            )
          ],
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  final TextEditingController textController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              autofocus: true,
              style: TextStyle(fontSize: 20.0),
              controller: textController,
            ),
          ),
          SizedBox(
            height: 8.0,
          ),
          RaisedButton(
            child: Text(
              'Submit',
              style: TextStyle(color: Colors.white),
            ),
            color: Colors.blue,
            onPressed: () {
              Navigator.pop(context, textController.text);
            },
          )
        ],
      )),
    );
  }
}

关闭时保存页面状态

2 个答案:

在小部件的多次调用之间保留变量的值

创建模型

使用模型