如何修复Flutter中ExpansionTile展开时容器（kCardColor）颜色变化问题

问题原因 #

你设置的ExpansionTile的backgroundColor会在组件展开时覆盖外层Container的kCardColor，而且ExpansionTile的背景会占满父容器空间，导致原本的容器颜色被遮挡。

修复方案 #

1. 移除ExpansionTile的backgroundColor属性，避免它覆盖外层容器颜色
2. 如果需要给ExpansionTile的内容区域设置背景，把背景放到children的外层容器里，而非直接使用ExpansionTile的backgroundColor

修改后的代码：

ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Container(
    color: kCardColor,
    child: ExpansionTile(
      collapsedTextColor: Colors.black,
      // 移除backgroundColor属性
      title: Text(
        'Notification',
        style: TextStyle(fontSize: 10, color: Colors.black),
      ),
      iconColor: Colors.black,
      children: [
        // 给children添加外层容器设置背景色
        Container(
          color: Color.fromARGB(255, 66, 29, 29),
          child: Column(
            children: [
              ListTile(
                title: Text(
                  'Hey',
                  style: TextStyle(fontWeight: FontWeight.w700),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);

额外说明 #

• 原代码中children里有一个多余的闭合括号),，需删除否则会报错
• 修改后，外层Container的kCardColor会始终显示，ExpansionTile展开后的内容区域用单独容器设置背景，不会影响外层颜色

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