Flutter技术问询：如何减小ExpansionTile组件的默认高度

我在Flutter应用中使用了ExpansionTile组件，想要减小它的默认高度。尝试了多种现有解决方案（比如设置ListTileTheme的dense属性等），但都没达到预期效果。

当前代码片段 #

child: Padding(
  padding: const EdgeInsets.symmetric(horizontal: 18.0),
  child: ListTileTheme(
    dense: true,
    horizontalTitleGap: 0.0,
    minLeadingWidth: 0,
    contentPadding: EdgeInsets.zero,
    child: ExpansionTile(
      title: AppText(
        "+ More",
        textStyle: textStyle,
        textAlign: TextAlign.center,
      ),
      backgroundColor: AppColors.whiteColor,
      collapsedBackgroundColor: AppColors.whiteColor,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.zero,
      ),
      trailing: const SizedBox(height: 0),
      children: const <Widget>[
        ListTile(title: Text('This is tile number 1')),
      ],
    ),
  ),
),

当前效果 #

解决方案 #

方案1：调整ListTileTheme的minTileHeight并压缩title内边距 #

ExpansionTile的默认高度由内部ListTile的minTileHeight控制，仅设置dense: true无法完全压缩，需要显式设置更小的minTileHeight，同时给title组件添加紧凑内边距：

child: Padding(
  padding: const EdgeInsets.symmetric(horizontal: 18.0),
  child: ListTileTheme(
    dense: true,
    horizontalTitleGap: 0.0,
    minLeadingWidth: 0,
    contentPadding: EdgeInsets.zero,
    // 直接设置最小高度，按需调整数值
    minTileHeight: 30, 
    child: ExpansionTile(
      title: Padding(
        // 压缩title的上下内边距，进一步缩小高度
        padding: const EdgeInsets.symmetric(vertical: 2),
        child: AppText(
          "+ More",
          textStyle: textStyle,
          textAlign: TextAlign.center,
        ),
      ),
      backgroundColor: AppColors.whiteColor,
      collapsedBackgroundColor: AppColors.whiteColor,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.zero,
      ),
      // 替换为更小的展开图标，避免占用额外高度
      trailing: const Icon(Icons.expand_more, size: 16),
      children: const <Widget>[
        ListTile(title: Text('This is tile number 1')),
      ],
    ),
  ),
),

方案2：全局覆盖ExpansionTile样式（Theme方式） #

如果需要在多个地方统一调整ExpansionTile高度，可以用Theme组件包裹，修改全局ListTile样式：

Theme(
  data: Theme.of(context).copyWith(
    listTileTheme: const ListTileThemeData(
      minTileHeight: 30,
      dense: true,
      contentPadding: EdgeInsets.zero,
    ),
  ),
  child: ExpansionTile(
    // 你的ExpansionTile配置
  ),
)

关键说明 #

• minTileHeight：这是控制ExpansionTile触发区域高度的核心属性，直接设置为你需要的最小高度（比如28、30）。
• Title内边距：默认文本组件可能自带行高或内边距，手动设置更小的vertical padding可以进一步压缩整体高度。
• Trailing组件：默认展开图标有固定大小，替换为更小的Icon或空容器，避免占用不必要的垂直空间。

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