时间戳

首页 > 解决方案 > Flutter-web TextFormField 问题

flutter - Flutter-web TextFormField 问题

问题描述

通常我可以禁用/灰显一个按钮，直到 TextFormField 通过类似这样的方式满足某些参数：

TextFormField(
controller: _controller
value: (value)
)

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

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

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

我猜我错过了一些东西，或者这种方法对于网络来说是不可能的......还有其他方法可以获得相同的结果吗？

标签： flutterdartflutter-web

解决方案

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

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

推荐阅读