【问题标题】:How to pass data from alert dialog to same page in flutter如何在颤动中将数据从警报对话框传递到同一页面
【发布时间】:2019-02-28 19:54:27
【问题描述】:

我想从警报对话框传递数据。警报对话框包含文本字段,因此无论用户在文本字段中输入什么类型的文本都应传递到主页(屏幕)。以下是警报对话框的代码

    Padding(
                          padding: const EdgeInsets.only(left: 42.0),
                          child: Align(
                            alignment: Alignment.topCenter,
                            child: RaisedButton(onPressed: (){
                                _showDialog();
                            },
                          ),
                        ),

Padding(
                padding: const EdgeInsets.only(top: 50.0),
                  child: new Text('// Displays text'););

    void _showDialog() {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            // return object of type Dialog
            return AlertDialog(
              title: new Text("Alert Dialog title"),
              content: TextField(
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    hintText: 'Enter the number'
                ),
              )
              ,
              actions: <Widget>[
                // usually buttons at the bottom of the dialog
                Row(
                  children: <Widget>[
                   new FlatButton(
                   child: new Text("Cancel"),
                    onPressed: () {
                    Navigator.of(context).pop();
                    },
                  ),
                    new FlatButton(onPressed: (){

                    }, child: new Text("OK"))
                  ],

                ),
              ],
            );
          },
        );
      }

【问题讨论】:

    标签: dart flutter


    【解决方案1】:

    编辑新的解决方案:

    // write this in your main page
    String onMainPageText;
    

    _showdialog方法Text(onMainPageText)

    中点击okey后,您可以在主页上显示这样的内容!

    使用以下代码更改您的 _showDialog 方法。

      void _showDialog() {
        String dialogText;
        showDialog(
          context: context,
          builder: (BuildContext context) {
            // return object of type Dialog
            return AlertDialog(
              title: new Text("Alert Dialog title"),
              content: TextField(
                onChanged: (String textTyped) {
                  setState(() {
                    dialogText = textTyped;
                  });
                },
                keyboardType: TextInputType.number,
                decoration: InputDecoration(hintText: 'Enter the number'),
              ),
              actions: <Widget>[
                // usually buttons at the bottom of the dialog
                Row(
                  children: <Widget>[
                    new FlatButton(
                      child: new Text("Cancel"),
                      onPressed: () {
                        setState(() {
                          onMainPageText = '';
                        });
                        Navigator.of(context).pop();
                      },
                    ),
                    new FlatButton(
                        onPressed: () {
                          setState(() {
                            onMainPageText = dialogText;
                          });
                          Navigator.of(context).pop();
                        },
                        child: new Text("OK"))
                  ],
                ),
              ],
            );
          },
        );
      }
    
    

    旧答案:

    创建一个全局 TextEditingController 将处理您的问题,您可以使用 textEditingConroller.text 访问文本字段文本

    不要忘记在你的类中定义 textEditingController

    class YourMainPageState extends State<YourMainPage>{
      TextEditingController textEditingController = new TextEditingController();
    
    }
    
      void _showDialog() {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            // return object of type Dialog
            return AlertDialog(
              title: new Text("Alert Dialog title"),
              content: TextField(
                controller: textEditingController,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(hintText: 'Enter the number'),
              ),
              actions: <Widget>[
                // usually buttons at the bottom of the dialog
                Row(
                  children: <Widget>[
                    new FlatButton(
                      child: new Text("Cancel"),
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                    ),
                    new FlatButton(onPressed: () {print(textEditingController.text);}, child: new Text("OK"))
                  ],
                ),
              ],
            );
          },
        );
      }
    
    

    您可以使用该代码显示键入的文本:

    Padding(
                    padding: const EdgeInsets.only(top: 50.0),
                      child: new Text(texEditingController.text););
    

    【讨论】:

    • 谢谢,但是如何在主屏幕上显示我在文本字段中输入的文本。
    • 我假设您正在从主屏幕调用 _showDialog 方法,所以您需要做的就是在您的主屏幕类中编写代码 TextEditingController textEditingController = new TextEditingController(); 并在我的答案中使用 _showDialog 方法,并且您可以使用textEditingController.text 访问文本
    • 谢谢,但您在 logcat 上显示此打印。我的问题是如何在主页上显示文本而不是在打印中显示。
    • Okey post code 和 comment 你想在哪里显示它,我可以修改它,但基本上你可以使用'textEditingController.text'到达键入的文本字段
    • 我已经更新了上面的代码,还注释了文本应该放在哪里。
    【解决方案2】:

    文本字段有一个名为 onChanged 的​​参数:您可以使用它来传递函数

    TextField(
                keyboardType: TextInputType.number,
                onChange: onChange
                decoration: InputDecoration(
                    hintText: 'Enter the number'
                ),
              )
    

    在你的主屏幕上使用这个:

     void onChange(String text) {
     //do stuff here with text like maybe setState
     }
    

    【讨论】:

      猜你喜欢
      • 2022-06-29
      • 2020-10-08
      • 1970-01-01
      • 2017-02-05
      • 2020-04-14
      • 1970-01-01
      • 1970-01-01
      • 2018-04-19
      • 1970-01-01
      相关资源
      最近更新 更多