在Flutter中的屏幕之间传递数据

Question

当我正在学习Flutter时,我来到导航.我想屏幕之间的数据传递类似于Android中传递活动之间的数据和iOS中查看控制器之间传递数据.我如何在Flutter中做到这一点？

相关问题:

• 在Flutter中的小部件之间传递数据的最佳方法
• 在小部件之间传递数据？
• Flutter /如何在Statefulwidget之间传递和获取数据

我正在创建这个规范问答,因为我找不到Flutter的另一个.我的答案如下.

Answer 1

这个答案将涵盖向前传递数据和传回数据.与Android Activities和iOS ViewControllers不同,Flutter中的不同屏幕只是小部件.在它们之间导航涉及创建称为路由的东西,并使用Navigator推送和弹出堆栈上下的路由.

将数据传递到下一个屏幕

要将数据发送到下一个屏幕,请执行以下操作:

1. 使SecondScreen构造函数获取要发送给它的数据类型的参数.在此特定示例中,数据被定义为String值并在此处设置this.text.

   class SecondScreen extends StatelessWidget {
     final String text;
     SecondScreen({Key key, @required this.text}) : super(key: key);
   
     ...
   

2. 然后使用Navigator在FirstScreen小部件的路线推到SecondScreen小部件.您将要发送的数据作为参数放在其构造函数中.

   Navigator.push(
       context,
       MaterialPageRoute(
         builder: (context) => SecondScreen(text: 'Hello',),
       ));
   

完整的代码在main.dart这里:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter',
    home: FirstScreen(),
  ));
}

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() {
    return _FirstScreenState();
  }
}

class _FirstScreenState extends State<FirstScreen> {

  // this allows us to access the TextField text
  TextEditingController textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First screen')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [

          Padding(
            padding: const EdgeInsets.all(32.0),
            child: TextField(
              controller: textFieldController,
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
          ),

          RaisedButton(
            child: Text(
              'Go to second screen',
              style: TextStyle(fontSize: 24),
            ),
            onPressed: () {
              _sendDataToSecondScreen(context);
            },
          )

        ],
      ),
    );
  }

  // get the text in the TextField and start the Second Screen
  void _sendDataToSecondScreen(BuildContext context) {
    String textToSend = textFieldController.text;
    Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => SecondScreen(text: textToSend,),
        ));
  }
}

class SecondScreen extends StatelessWidget {
  final String text;

  // receive data from the FirstScreen as a parameter
  SecondScreen({Key key, @required this.text}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second screen')),
      body: Center(
        child: Text(
          text,
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

将数据传回上一屏幕

传回数据时,您需要执行以下操作:

1. 在FirstScreen中,使用Navigator推(启动)SecondScreen中的async方法,并等待结果,当它完成它会返回.

   final result = await Navigator.push(
       context,
       MaterialPageRoute(
         builder: (context) => SecondScreen(),
       ));
   

2. 在SecondScreen,弹出时,包括要作为参数传回的数据Navigator.

   Navigator.pop(context, 'Hello');
   

3. 然后在FirstScreen该await会结束,你可以使用的结果.

   setState(() {
     text = result;
   });
   

以下是完整的代码main.dart供您参考.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Flutter',
    home: FirstScreen(),
  ));
}

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() {
    return _FirstScreenState();
  }
}

class _FirstScreenState extends State<FirstScreen> {

  String text = 'Text';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [

            Padding(
              padding: const EdgeInsets.all(32.0),
              child: Text(
                text,
                style: TextStyle(fontSize: 24),
              ),
            ),

            RaisedButton(
              child: Text(
                'Go to second screen',
                style: TextStyle(fontSize: 24),
              ),
              onPressed: () {
                _awaitReturnValueFromSecondScreen(context);
              },
            )

          ],
        ),
      ),
    );
  }

  void _awaitReturnValueFromSecondScreen(BuildContext context) async {

    // start the SecondScreen and wait for it to finish with a result
    final result = await Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => SecondScreen(),
        ));

    // after the SecondScreen result comes back update the Text widget with it
    setState(() {
      text = result;
    });
  }
}

class SecondScreen extends StatefulWidget {
  @override
  _SecondScreenState createState() {
    return _SecondScreenState();
  }
}

class _SecondScreenState extends State<SecondScreen> {
  // this allows us to access the TextField text
  TextEditingController textFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second screen')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [

          Padding(
            padding: const EdgeInsets.all(32.0),
            child: TextField(
              controller: textFieldController,
              style: TextStyle(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
          ),

          RaisedButton(
            child: Text(
              'Send text back',
              style: TextStyle(fontSize: 24),
            ),
            onPressed: () {
              _sendDataBack(context);
            },
          )

        ],
      ),
    );
  }

  // get the text in the TextField and send it back to the FirstScreen
  void _sendDataBack(BuildContext context) {
    String textToSendBack = textFieldController.text;
    Navigator.pop(context, textToSendBack);
  }
}

Answer 2

获得完美解决方案：

1. 从第一个屏幕导航到其他屏幕：

   Navigator.pushNamed(context, "second",arguments: {"name" : 
     "Bijendra", "rollNo": 65210});
   },
   

2. 在构建方法的第二个屏幕上获取为：

   @override
   Widget build(BuildContext context) {
       final  Map<String, Object>rcvdData = ModalRoute.of(context).settings.arguments;
       print("rcvd fdata ${rcvdData['name']}");
       print("rcvd fdata ${rcvdData}");
   
       return Scaffold(appBar: AppBar(title: Text("Second")),
         body: Container(child: Column(children: <Widget>[
         Text("Second"),
       ],),),);
   
   }
   

Answer 3

上面的答案对于小型应用程序很有用，但是如果您想消除持续担心小部件状态的麻烦，Google 提供了 Provider 包。 https://pub.dev/packages/provider

看看那个，或观看 Andrea Bizzotto 的这些视频：https : //www.youtube.com/watch? v = MkFjtCov62g // 提供者：基本指南 https://www.youtube.com/watch?v =O71rYKcxUgA&t=258s // 提供者：介绍

了解如何使用 Provider 包，您就可以终身受益了 :)

Answer 4

最简单的方法

FirstPage.dart

 Navigator.push(
          context,
          MaterialPageRoute(
              builder: (context) => PasswordRoute(usernameController)));

// usernameController是字符串值，如果要传递多个值，请添加所有

SecondPage.dart

class PasswordRoute extends StatefulWidget {
  final String usernameController;//if you have multiple values add here
PasswordRoute(this.usernameController, {Key key}): super(key: key);//add also..example this.abc,this...

  @override
  State<StatefulWidget> createState() => _PasswordPageState();
}

class _PasswordPageState extends State<PasswordRoute> {
 @override
  Widget build(BuildContext context) {
...child: Text(widget.usernameController);
}
}

Answer 5

This solution is very easy by passing variables in constructor:

first page:

Navigator.of(context).push(MaterialPageRoute(builder:(context)=>SecondPage('something')));

second page:

class SecondPage extends StatefulWidget {
  String something;
  SecondPage(this.something);
  @override
  State<StatefulWidget> createState() {
    return SecondPageState(this.something);
  }
}
class SecondPageState extends State<SecondPage> {
  String something;
  SecondPageState(this.something);
  @override
  Widget build(BuildContext context) {
   return Scaffold(
    appBar: AppBar(
    //now you have passing variable
    title: Text(something),
   ),
   ...
  }

Answer 6

第一屏幕： //发送数据到第二屏幕

 Navigator.push(context, MaterialPageRoute(builder: (context) {
                          return WelcomeUser(usernameController.text);

                          }));

第二个屏幕： //从第一个屏幕获取数据

 final String username;
  WelcomeUser(this.username);

//使用数据来显示

body: Container(
    child: Center(
      child: Text("Welcome "+widget.username,
      textAlign: TextAlign.center,
      ),
    ),
  ),