Flutter ExpansionTile布局问题：如何将subtitle移至展开图标下方并消除空白

要把副标题放到展开图标的下方，直接用ExpansionTile自带的subtitle参数肯定不行——它默认是在标题下方的独立区域。你可以把展开图标和副标题组合成一个Column，替换掉原来的trailing参数，这样就能实现图标在上、副标题在下的布局，同时消除图标下方的空白。

修改后的示例代码 #

ExpansionTile(
  title: const Text('你的标题文本'),
  // 移除自带的subtitle参数，改用自定义trailing
  trailing: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      // 展开/收起图标
      const Icon(Icons.expand_more),
      // 图标和副标题之间的间距，可按需调整
      const SizedBox(height: 3),
      // 副标题文本，用默认subtitle的样式保持UI统一
      Text(
        '你的副标题内容',
        style: Theme.of(context).textTheme.caption,
      ),
    ],
  ),
  // 展开后的子项内容
  children: const [
    ListTile(title: Text('展开内容1')),
    ListTile(title: Text('展开内容2')),
  ],
)

关键说明 #

• 把原来的subtitle内容移到trailing的Column里，让图标和副标题垂直排列
• 用Theme.of(context).textTheme.caption匹配默认subtitle的字体样式，避免UI风格混乱
• 可以通过调整SizedBox高度或Column的mainAxisAlignment，灵活控制图标与副标题的间距

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