如何将数据从警报对话框传递到flutter中的同一页面

问题描述 投票:1回答:2

我想从alert对话框中传递数据.Alert对话框包含textfield,因此无论文本字段上的用户类型是什么,文本都应该传递到主页面(屏幕).Below是警告对话框的代码

    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
2个回答
0
投票

textfield有一个名为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
 }

0
投票

编辑新解决方案:

// 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););
© www.soinside.com 2019 - 2024. All rights reserved.