Question

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

当用户按下TextField时，我想对FlatButton中键入的文本进行处理。以下是代码：

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);
            },
          ),
        ],
      ),
    );
  }
}

当我在带有TestWidget的底部工作表上显示showModalBottomSheet()时出现问题，如下所示：

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

变量textVal在onChanged的{{1}}回调中更新，但是当用户在键入内容后按下TextField时，变量FlatButton为未更新。我已经打印了textVal中更新的textVal和onChanged中onPressed的值。

输出为：

FlatButton

打印的值是''，它是textVal的初始化值，而不是更新的值。

我希望TestWidget是无状态的。

Answer 1

这是sample code for your requirment 您需要一个TextEditingController()并将此TextEditingController（）分配给formfield控制器属性。例如，

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}");
            },
          ),
          ],
        ),
      ),
    );
  }

Answer 2

尝试并阅读了很多东西之后，我终于想出了一种方法，如果小部件是持久性底层的子级，变量textVal必须是静态的，以便在小部件之间保持价值。理论上，我不知道为什么，但是它对我有用。这是代码。

class TestWidget extends StatelessWidget {
  static String textVal = '';
  @override
  Widget build(BuildContext context) {

    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);
            },
          ),
        ],
      ),
    );
  }
}

在Flutter中使用showModalBottomSheet（）方法构建的底部工作表上显示的小部件中，变量未更新

2 个答案: