Question

最直接的解决方案：

class _GreetingPageState extends State<GreetingPage> {
  final TextEditingController _nameController = new TextEditingController(text: 'Anonymous');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello World'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_name),
            TextField(
              autofocus: true,
              controller: _nameController,
            ),
          ],
        ),
      ),
    );
  }
}

这不能按预期方式工作，在TextField中键入文本内容不会得到更新。

我必须更改以管理文本的另一状态：

class _GreetingPageState extends State<GreetingPage> {
  String _name = '';

  final TextEditingController _nameController = new TextEditingController(text: 'Anonymous');

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

    _nameController.addListener(
      () {
        setState(() {_name = _nameController.text;});
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello World'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_name),
            TextField(
              autofocus: true,
              controller: _nameController,
              decoration: new InputDecoration(
                hintText: 'Type your name',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

对于这种简单的“将值绑定到文本”情况，这会增加太多的复杂性。

我尝试搜索它，官方文档仅给出一个用例，其中_nameController.text仅在按下按钮时使用，但是我想在用户键入内容时处理文本更新。

Answer 1

我认为您的问题是，直到setState小部件不被调用之前，Text小部件才知道它必须更新。因此，您始终需要调用它。

您可以执行以下操作：

class __GreetingPageStateState extends State<_GreetingPageState> {
  final TextEditingController _nameController =
      new TextEditingController(text: 'Anonymous');

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(_nameController.text),
        TextField(
            autofocus: true,
            controller: _nameController,
            onChanged: (text) {
              setState(() {});
            }),
      ],
    );
  }
}

如何在Flutter中将文本字段的文本绑定到简单的文本标签

1 个答案: