Flutter 如何在显示对话框中使用文本形式获取用户输入？

Question

我试图让用户输入以在显示对话框中使用文本形式更改标题，但似乎每当键盘输入时状态都在重建 shows/closes，我的代码以前可以工作，但是当我flutter 升级到 v1.17 它不再工作了。我已经被困在这里几天了，我不知道我的代码有什么问题或可能导致它的错误，我只能在调试控制台中看到 "getSelectedText on inactive InputConnection" 和 "mSecurityInputMethodService is null" , 请帮忙

这是我的代码示例：

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  final TextEditingController titleController = new TextEditingController();
  final GlobalKey<FormState> _keyDialogForm = new GlobalKey<FormState>();

  @override
  void initState() {
    super.initState();

    titleController.text = 'Hello';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: Center(
          child: Column(
            children: <Widget>[
              Text(titleController.text),
              SizedBox(
                height: 50,
              ),
              FlatButton(
                  color: Colors.redAccent,
                  onPressed: () {
                    showTitleDialog();
                  },
                  child: Text(
                    'Show Dialog',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ))
            ],
          ),
        ));
  }

  Future showTitleDialog() {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Form(
              key: _keyDialogForm,
              child: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: const InputDecoration(
                      icon: Icon(Icons.ac_unit),
                    ),
                    maxLength: 8,
                    textAlign: TextAlign.center,
                    onSaved: (val) {
                      titleController.text = val;
                    },
                    autovalidate: true,
                    validator: (value) {
                      if (value.isEmpty) {
                        return 'Enter Title Name';
                      }

                      return null;
                    },
                  )
                ],
              ),
            ),
            actions: <Widget>[
              FlatButton(
                onPressed: () {
                  if (_keyDialogForm.currentState.validate()) {
                    _keyDialogForm.currentState.save();

                    Navigator.pop(context);
                  }
                },
                child: Text('Save'),
                color: Colors.blue,
              ),
              FlatButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text('Cancel')),
            ],
          );
        });
  }
}

Answer 1

您可以复制粘贴运行下面的完整代码
您可以在 onSaved
中调用 setState 代码片段

onSaved: (val) {
                  titleController.text = val;
                  setState(() {});
                },

工作演示

完整代码

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  final TextEditingController titleController = new TextEditingController();
  final GlobalKey<FormState> _keyDialogForm = new GlobalKey<FormState>();

  @override
  void initState() {
    super.initState();

    titleController.text = 'Hello';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: false,
        body: Center(
          child: Column(
            children: <Widget>[
              Text(titleController.text),
              SizedBox(
                height: 50,
              ),
              FlatButton(
                  color: Colors.redAccent,
                  onPressed: () {
                    showTitleDialog();
                  },
                  child: Text(
                    'Show Dialog',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ))
            ],
          ),
        ));
  }

  Future showTitleDialog() {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Form(
              key: _keyDialogForm,
              child: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: const InputDecoration(
                      icon: Icon(Icons.ac_unit),
                    ),
                    maxLength: 8,
                    textAlign: TextAlign.center,
                    onSaved: (val) {
                      titleController.text = val;
                      setState(() {});
                    },
                    autovalidate: true,
                    validator: (value) {
                      if (value.isEmpty) {
                        return 'Enter Title Name';
                      }

                      return null;
                    },
                  )
                ],
              ),
            ),
            actions: <Widget>[
              FlatButton(
                onPressed: () {
                  if (_keyDialogForm.currentState.validate()) {
                    _keyDialogForm.currentState.save();

                    Navigator.pop(context);
                  }
                },
                child: Text('Save'),
                color: Colors.blue,
              ),
              FlatButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text('Cancel')),
            ],
          );
        });
  }
}

void main() {
  runApp(MyApp());
}

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

Flutter 如何在显示对话框中使用文本形式获取用户输入？

Flutter how to get user input using text form in show dialog?

forms

keyboard

user-input

showdialog

flutter