Flutter实现标题文本框随编辑按钮切换可编辑/不可编辑状态

核心思路是用状态变量控制文本框的可编辑状态，同时在AppBar右侧添加编辑按钮，点击时切换这个变量的值。以下是具体实现步骤和代码示例：

1. 添加状态控制变量 #

在页面的State类中新增布尔变量，标记标题文本框的可编辑状态：

bool _isTitleEditable = false;

2. 绑定文本框的可编辑状态 #

将标题文本框的enabled属性与上述变量绑定，变量变化时文本框状态自动更新：

TextFormField(
  enabled: _isTitleEditable, // 绑定状态变量
  decoration: const InputDecoration(
    labelText: 'title',
  ),
  // 你的其他文本框配置（如controller、validator等）
)

3. 在AppBar右侧添加编辑按钮 #

在AppBar的actions数组里插入编辑按钮（放在完成按钮旁），点击时切换状态变量：

AppBar(
  title: const Text('页面标题'),
  actions: [
    // 编辑按钮
    IconButton(
      icon: Icon(_isTitleEditable ? Icons.save : Icons.edit), // 可选：根据状态切换图标
      onPressed: () {
        setState(() {
          _isTitleEditable = !_isTitleEditable;
          // 可选：进入编辑状态时自动获取焦点
          // _titleFocusNode.requestFocus();
        });
      },
    ),
    // 你的完成按钮
    TextButton(
      onPressed: () {
        // 完成按钮逻辑
      },
      child: const Text('完成'),
    ),
  ],
)

可选优化 #

如果需要进入编辑状态时自动让文本框获取焦点，可先创建FocusNode：

final FocusNode _titleFocusNode = FocusNode();

然后绑定到文本框：

TextFormField(
  focusNode: _titleFocusNode,
  // 其他配置
)

最后在编辑按钮的点击事件中添加焦点请求（即上述代码注释部分）。

这样点击编辑按钮时，title文本框会在可编辑/不可编辑状态间切换，按钮图标也会随状态变化，交互更直观。

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