Flutter-web TextFormField 问题

Question

通常我可以 disable/grey-out 一个按钮，直到 TextFormField 通过这样的方式满足某些参数：

TextFormField(
controller: _controller
value: (value)
)

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

但是当编译为网站时，按钮似乎不再知道控制器值...

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

我猜我遗漏了一些东西，或者这种方法不适用于网络...还有其他方法可以得到相同的结果吗？

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');
  }
}

Flutter-web TextFormField 问题

Flutter-web TextFormField issue

dart

flutter

flutter-web