android - 在 Flutter 中使用 showModalBottomSheet() 方法构建的底部工作表上显示的小部件中未更新变量

Question

我有一个名为 testWidget 的小部件，它有两个子部件:一个 TextField 和一个 FlatButton。

当用户按下 FlatButton 时，我想对 TextField 中键入的文本执行某些操作。以下是代码:

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String textVal = '';
    return Scaffold(
      appBar: AppBar(
        title: Text('Testing'),
      ),
      body: Column(
        children: <Widget>[
          TextField(
            textAlign: TextAlign.center,
            onChanged: (String newVal) {
              textVal = newVal;
              print('Typing: ' + textVal);
            },
          ),
          FlatButton(
            child: Text('Press Button'),
            onPressed: () {
              print('Value got: ' + textVal);
            },
          ),
        ],
      ),
    );
  }
}

当我使用 showModalBottomSheet() 在底页显示 TestWidget 时出现问题，如下所示:

showModalBottomSheet(context: context, builder: (context) => TestWidget());

变量 textVal 在 TextField 的 onChanged 回调中更新，但是当用户按下 FlatButton输入内容后，变量 textVal 不会更新。我打印了在 onChanged 中更新的 textVal 的值，以及 FlatButton 的 onPressed 的值。

输出是:

I/flutter (11067): Typing: N
I/flutter (11067): Typing: Ne
I/flutter (11067): Typing: New
I/flutter (11067): Typing: New 
I/flutter (11067): Typing: New t
I/flutter (11067): Typing: New te
I/flutter (11067): Typing: New tex
I/flutter (11067): Typing: New text
I/flutter (11067): Typing: New text 
I/flutter (11067): Typing: New text T
I/flutter (11067): Typing: New text Ty
I/flutter (11067): Typing: New text Typ
I/flutter (11067): Typing: New text Type
I/flutter (11067): Typing: New text Typed
(After typing Text, User pressed FlatButton)
I/flutter (11067): Value got: 

打印的值为 ' '，这是 textVal 的初始化值，不是更新后的值。

我希望 TestWidget 是无状态的。

Answer 1

这是 sample code for your requirment您需要一个 TextEditingController() 并将此 TextEditingController() 分配给您的表单域 Controller 属性。例如，

class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  final myController = TextEditingController();

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

    myController.addListener(_printLatestValue);
  }

  @override
  void dispose() {
    // Clean up the controller when the widget is removed from the widget tree.
    // This also removes the _printLatestValue listener.
    myController.dispose();
    super.dispose();
  }

  _printLatestValue() {
setState(() {    print(" text field: ${myController.text}");
  });


  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retrieve Text Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: myController,
            ),
FlatButton(
            child: Text('Press Button'),
            onPressed: () {
              print("Value got:  +${myController.text}");
            },
          ),
          ],
        ),
      ),
    );
  }