Flutter使用ExpansionTile无法实现预期折叠展开按钮UI如何解决

原生ExpansionTile默认自带分隔线、固定内边距和布局样式，仅修改基础参数没法匹配图中的按钮式折叠UI，按以下方式调整即可实现目标效果：

• 移除组件默认的边框、分隔线、多余内边距
• 给整个组件外层加统一圆角和背景色，保证折叠/展开状态视觉统一
• 子项使用和标题同宽度的列表项布局，按需加内部分割线区分选项

可直接复用的代码如下：

Widget buildFoldableHealthButton() {
  return Container(
    margin: const EdgeInsets.symmetric(horizontal: 12),
    decoration: BoxDecoration(
      color: Colors.amber,
      borderRadius: BorderRadius.circular(6),
    ),
    child: ExpansionTile(
      // 清除默认内外边距
      tilePadding: const EdgeInsets.symmetric(horizontal: 16),
      childrenPadding: EdgeInsets.zero,
      // 移除默认上下边框、分隔线
      shape: const Border(),
      collapsedShape: const Border(),
      // 统一折叠/展开状态颜色
      collapsedBackgroundColor: Colors.amber,
      backgroundColor: Colors.amber,
      textColor: Colors.black,
      collapsedTextColor: Colors.black,
      iconColor: Colors.black,
      collapsedIconColor: Colors.black,
      title: const Text("Health"),
      children: [
        // 子项间分割线
        Divider(height: 1, thickness: 1, color: Colors.amber.shade700),
        ListTile(
          title: const Text("children 1"),
          onTap: () {},
        ),
        Divider(height: 1, thickness: 1, color: Colors.amber.shade700),
        ListTile(
          title: const Text("children 2"),
          onTap: () {},
        ),
        Divider(height: 1, thickness: 1, color: Colors.amber.shade700),
        ListTile(
          title: const Text("Health"),
          onTap: () {},
        ),
      ],
    ),
  );
}

如果需要更灵活的交互控制（比如自定义展开动画时长、调整展开图标位置、点击子项自动折叠等），可以直接用AnimatedSize配合Column手动实现折叠逻辑，不受原生组件的默认样式限制。

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