【问题标题】:How to send simple data from `secondpage` to `mainpage` (stateful to stateful)如何将简单数据从“第二页”发送到“主页面”(有状态到有状态)
【发布时间】:2020-03-11 20:13:39
【问题描述】:

我发现很多解决方案在 statelessstateful 小部件之间传递数据,但在 之间没有传递数据>两个有状态的小部件

编辑:我编辑了代码以显示更多细节

主页

class MainPage extends StatefulWidget {
  final String name;
  MainPage({Key key, this.name}) : super(key: key);

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(      
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Text from 2nd page -> "), //should return "Text from 2nd page -> BATMAN"
            FloatingActionButton(
              child: Icon(Icons.android),
              onPressed: (){
                Navigator.push(context, MaterialPageRoute(
                    builder: (context) => SecondPage()
                ));
              },
            ),
            
          ],
        ),
      ),
    );
  }
}

第二页:

class SecondPage extends StatefulWidget {
  SecondPage({Key key}) : super(key: key);

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ...
      
      Text("I choose ${_selectedMethod.name}"), // this returned "I choose BATMAN"
      
    ...
  }

所以基本上我想将${_selectedMethod.name} 从 2ndPage 传递到 MainPage。对不起,我解释得太差了:(

【问题讨论】:

  • 两个页面如何相互连接?您使用 Navigator.push() 从一个导航到另一个?或者例如它们是来自更高页面的标签吗?哪个变量包含您要在它们之间传递的信息?请编辑您的问题以包含这些详细信息。
  • 使用 Navigator MaterialPageRoute,您可以创建第二个有状态的并将值作为最终值传递给使用。
  • @Naslausky 抱歉,我编辑了我的问题
  • 我从你的问题中了解到的是,你点击 MainPage 中的 android 按钮,然后它转到 SecondPage,然后你按回,它来到 Mainpage 与 batman 字符串对吗?
  • @BalajiRamadoss 是的,但它不需要弹回主页。我希望它只停留在第二页,直到我按下后退按钮

标签: flutter stateful


【解决方案1】:

您可以通过.pop() 方法将变量传递回导航器堆栈中的上一个页面,并使用.then() 方法将它们期待在上一个页面中:

class MainPage60643815 extends StatefulWidget {
  @override
  _MainPage60643815State createState() => _MainPage60643815State();
}

class _MainPage60643815State extends State<MainPage60643815> {
  String displayTextFromSecondPage = '';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Test from second page: '),
              Text(displayTextFromSecondPage),
            ],
          ),
          RaisedButton(
            onPressed: goToSecondPage,
            child: Text('Go to 2nd Page'),
          ),
        ],
      ),
    );
  }

  void goToSecondPage(){
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) {
        return SecondPage60643815(text: displayTextFromSecondPage);
      }
    )).then((valueFromSecondPage){
      setState(() {
        displayTextFromSecondPage = valueFromSecondPage;
      });
    });
  }
}

class SecondPage60643815 extends StatefulWidget {
  final String text;

  SecondPage60643815({this.text});

  @override
  _SecondPage60643815State createState() => _SecondPage60643815State();
}

class _SecondPage60643815State extends State<SecondPage60643815> {
  TextEditingController _textEditingController;

  @override
  void initState() {
    _textEditingController = TextEditingController(
      text: widget.text,
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: goToFirstPage,
        ),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                controller: _textEditingController,
                autofocus: true,
              ),
            ],
          ),
        ),
      ),
    );
  }

  void goToFirstPage(){
    Navigator.of(context).pop(_textEditingController.text);
  }
}

【讨论】:

  • 我原来的问题不是很清楚。我用图片编辑了我的问题
  • @Domi 我已经更新了我的回复,按照你的要求去做。
  • 谢谢,但我希望它只停留在第二页而不弹出回到主页面,直到我按下返回按钮
  • 我已经修改了代码,让AppBar 上的后退按钮可以将数据发送回主页。
  • 我现在已经更新了代码以拥有你提到的所有功能。如果这回答了您的问题,请不要忘记将答案标记为正确。另外,请考虑为相关性投票。
【解决方案2】:

我假设您有一个 SecondPage-Widget。所以你可以这样做:

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: SecondPage('BATMAN'),
    );
  }
}

这可能会打印所需的“BATMAT”文本。

编辑

这可能是您的 SecondPage 小部件:

class SecondPage extends StatefulWidget {
  final String selection;

  SecondPage(this.selection);

  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Text(widget.selection),
    );
  }
}

【讨论】:

  • 我有 SecondPage 作为有状态的小部件。我不能像普通小部件那样称呼它
  • 您当然可以将有状态的小部件放在您需要的任何地方。您的有状态小部件可能具有以下结构:我将第二页小部件示例添加到我的答案中您现在可以像上面描述的那样使用它 (SecondPage())
猜你喜欢
  • 1970-01-01
  • 2019-12-20
  • 1970-01-01
  • 2020-02-10
  • 2013-10-09
  • 2021-04-17
  • 1970-01-01
  • 2021-06-25
  • 2018-10-20
相关资源
最近更新 更多