Flutter：点击ExpansionTile子组件TextField时面板收起，求解决方案

在Flutter开发中，点击ExpansionTile子组件内的搜索TextField时，面板会自动收起，即使设置了maintainState: true也无法解决。以下是可行的解决方法：

问题相关代码 #

ExpansionTile部分代码

child: Column(
  children: [
    ExpansionTile(
      title: Text("Task Overview",
          style:
              TextStyle(fontWeight: FontWeight.bold)),
      // key: PageStorageKey<Task>(Task),
      maintainState: true,

      children: <Widget>[
        Task(),
      ],
    ),
  ],
),

Task Widget中的TextField代码

TextField(
  controller: textcontroller,

  style: const TextStyle(color: Colors.black),
  cursorColor: Colors.black,
  onChanged: (value) {
    searchResult(value);
  },
  decoration: InputDecoration(
    hintText: "Search",
    hintStyle:
        const TextStyle(fontSize: 14, color: Colors.black),

    suffixIcon: const Icon(Icons.search, color: Colors.black),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
      borderSide: const BorderSide(
        color: Colors.black,
        width: 2.0,
      ),
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
      borderSide: const BorderSide(
        style: BorderStyle.none,
      ),
    ),
    // filled: true,
  ),
),

解决方法 #

核心思路是手动控制ExpansionTile的展开状态，替代其内部自动状态管理，避免焦点变化导致的意外收起：

1. 在组件的State类中定义布尔变量，用于控制展开状态：

bool _isExpanded = false;

2. 修改ExpansionTile的属性，绑定状态变量并处理展开/收起事件：

ExpansionTile(
  title: Text("Task Overview", style: TextStyle(fontWeight: FontWeight.bold)),
  maintainState: true,
  // 绑定手动控制的展开状态
  expanded: _isExpanded,
  // 仅在点击标题时更新状态
  onExpansionChanged: (bool expanded) {
    setState(() {
      _isExpanded = expanded;
    });
  },
  // 添加固定的PageStorageKey，帮助持久化状态
  key: const PageStorageKey('task_overview_tile'),
  children: <Widget>[
    Task(),
  ],
),

3. 额外优化：如果TextField的手势仍透传到父组件导致意外收起，可给TextField的父容器添加手势拦截：

GestureDetector(
  behavior: HitTestBehavior.opaque,
  onTap: () {}, // 空实现拦截手势，避免触发ExpansionTile的收起逻辑
  child: TextField(
    // 原TextField代码...
  ),
),

修改后，只有点击ExpansionTile的标题时才会切换展开/收起状态，点击子组件内的TextField时，面板会保持展开状态。

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