Flutter-web TextFormField问题

Question

通常，我可以禁用/灰显一个按钮，直到TextFormField在flutter中满足某些参数，如下所示：

TextFormField(
controller: _controller
value: (value)
)

SubmitButton(
onPressed: _controller.text.isNotEmpty ? _submit : null;
)

但是当被编译为网站时，Button似乎不再意识到控制器的值了……

我尝试过几种不同的定位方式，例如_controller.value.text.isEmpty和_controller.text.isEmpty……

我猜我遗漏了一些东西，或者这种方法在web上是不可能的。有没有其他方法可以得到同样的结果？

Answer 1

老实说，你的代码也不应该在flutter mobile中工作，但可能是因为屏幕键盘在显示或隐藏时会导致小部件重建。要解决此问题，我们必须使用带有状态变量的有状态小部件，如canSubmit，并使用setState方法在textField的侦听器onChange中更新它。然后，每次文本更改时，我们的有状态小部件都会更新提交按钮。

class Page extends StatefulWidget {
  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<Page> {
  bool canSubmit;

  @override
  void initState() {
    canSubmit = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            TextField(
              onChanged: (value) {
                setState(() {
                  canSubmit = value.isNotEmpty;
                });
              },
            ),
            RaisedButton(
              onPressed: canSubmit ? _submit : null,
              child: Text('Submit'),
            )
          ],
        ),
      ),
    );
  }

  void _submit() {
    print('Submitted');
  }
}