Flutter SetState 不更新文本

Posted

技术标签:

【中文标题】Flutter SetState 不更新文本【英文标题】:Flutter SetState not update Text 【发布时间】:2019-12-16 12:01:57 【问题描述】:

我有一个页面,其中包含一个文本,它应该显示我在 TextEditingController 中介绍的文本。我只粘贴重要的代码,如果需要更多请告诉我:

  @override
  Widget build(BuildContext context) 
    return WillPopScope(
        child: Scaffold(
            key: _scaffoldKey,
            appBar: _buildBar(context),
            body: Container(
                child: SingleChildScrollView(
                    child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.only(top: 10),
                ),
                buildTitle(),
              ],
            )))),
        onWillPop: () => _onWillPop(context));
...
  

buildTitle() 方法是:

Widget buildTitle() 
return Column(children: <Widget>[
  Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text(
        name == null ? "" : name,
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
      ),
      IconButton(
        icon: Icon(Icons.edit),
        onPressed: () 
          changeName();
        ,
      ),
    ],
  ),
  ...
]);

而 changeName() 是:

void changeName() 
    showDialog(
        context: context,
        builder: (context) 
          return StatefulBuilder(builder: (context, setState) 
            return AlertDialog(
              title: Text('Name'),
              content: TextField(
                autofocus: true,
                controller: _textController,
                decoration: InputDecoration(
                  hintText: "Name of product",
                  errorText: incorrectName
                      ? 'The name could not be empty'
                      : null,
                ),
              ),
              actions: <Widget>[
                FlatButton(
                  child: new Text('OK'),
                  onPressed: () 
                    if (_textController.text.length == 0) 
                      setState(() 
                        _textController.text.length == 0
                            ? incorrectName = true
                            : incorrectName = false;
                      );
                     else 
                      setState(() 
                        incorrectName = false;
                        name = _textController.text;
                      );
                      Navigator.of(context).pop();
                    
                  ,
                ),
                FlatButton(
                  child: new Text('Cancel'),
                  onPressed: () 
                      Navigator.of(context).pop();
                  ,
                )
              ],
            );
          );
        );
  

起初,名称是空的,所以只出现编辑按钮,但是当我点击确定时,文本不会改变,但我有其他方法使用 SetState,当我点击时,名称就会出现。

为什么在这种情况下不使用 SetState 更新名称?

【问题讨论】:

【参考方案1】:

更改changeName()返回类型:

Future<String> changeName() 
    showDialog<String>(
        context: context,
        builder: (context) 
            return AlertDialog(
              title: Text('Name'),
              content: TextField(
                autofocus: true,
                controller: _textController,
                decoration: InputDecoration(
                  hintText: "Name of product",
                  errorText: incorrectName
                      ? 'The name could not be empty'
                      : null,
                ),
              ),
              actions: <Widget>[
                FlatButton(
                  child: new Text('OK'),
                  onPressed: () 
                    if (_textController.text.length == 0) 
                      Navigator.of(context).pop(null);
                     else 
                      Navigator.of(context).pop(_textController.text);
                    
                  ,
                ),
                FlatButton(
                  child: new Text('Cancel'),
                  onPressed: () 
                      Navigator.of(context).pop(null);
                  ,
                )
              ],
            );
        );
  

在您的buildTitle()

Widget buildTitle() 
return Column(children: <Widget>[
  Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text(
        name == null ? "" : name,
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
      ),
      IconButton(
        icon: Icon(Icons.edit),
        onPressed: () async 
          name = await changeName();
          setState(());
        ,
      ),
    ],
  ),
  ...
]);

【讨论】:

那么,如何控制用户不在文本域中输入文本并显示错误? @LgFranco 把控制器也作为参数。 我不知道你是什么意思,你能解释一下或者举个例子吗? 它不起作用,这永远不会更新文本。此外,当用户使用textController.text.length == 0@LgFranco 按下 OK 时,此代码不会显示错误

以上是关于Flutter SetState 不更新文本的主要内容,如果未能解决你的问题,请参考以下文章

Flutter - setState 不更新内部有状态小部件

Flutter ListView 不使用 setState() 刷新 UI,尽管 itemCount 和附加列表正确更新

Flutter的setState更新原理和流程

在setState()之后更新Flutter页面

Flutter 文本小部件

Flutter 嵌套小部件 setState 无法按预期工作