Flutter点击AppBar编辑按钮后Title TextField无法切换为可编辑状态

核心问题在于状态更新未触发UI重建，以下是具体修复步骤和代码示例：

常见错误原因 #

你大概率是修改了只读状态变量，但没有调用setState触发Flutter重新渲染UI；或者状态变量未正确绑定到TextField的readOnly属性。

修复后的完整代码 #

class _EditTitlePageState extends State<EditTitlePage> {
  // 用State类成员变量管理只读状态
  bool _isTitleReadOnly = true;
  // 把TextEditingController提出来，避免build重复创建导致数据丢失
  final TextEditingController _titleController = TextEditingController(text: "初始标题");

  @override
  void dispose() {
    // 记得销毁控制器，防止内存泄漏
    _titleController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("编辑页面"),
        actions: [
          IconButton(
            // 可选：根据状态切换图标，提升交互体验
            icon: Icon(_isTitleReadOnly ? Icons.edit : Icons.check),
            onPressed: () {
              // 关键：必须用setState包裹状态修改，触发UI重建
              setState(() {
                _isTitleReadOnly = !_isTitleReadOnly;
              });
            },
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: TextField(
          controller: _titleController,
          // 绑定状态变量到readOnly属性
          readOnly: _isTitleReadOnly,
          decoration: const InputDecoration(
            labelText: "title",
            border: OutlineInputBorder(),
          ),
        ),
      ),
    );
  }
}

关键修复点 #

• 必须调用setState：Flutter的StatefulWidget只有在setState回调内修改状态，才会触发build方法重新执行，更新TextField的只读状态。
• 状态变量归属正确：把_isTitleReadOnly定义在State类内部，确保能被setState管理。
• 避免重复创建控制器：不要在build方法内初始化TextEditingController，否则每次重建都会重置输入内容，且可能引发内存泄漏。

其他排查方向 #

如果用了Provider、Bloc等状态管理库：

• 确保状态更新后调用了对应的通知方法（比如Provider的notifyListeners()）
• 检查是否在UI层正确监听了状态变化

内容的提问来源于stack exchange，提问作者JoshuaaMarkk