You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何调整Flutter ExpansionTile布局:将Trailing置于Title上方?

实现ExpansionTile将Trailing置于Title上方的方案

完全可以实现这个需求,核心是调整title的内部布局,把原本trailing的内容整合进去,同时隐藏默认的trailing参数,具体修改如下:

return Card(
  child: ExpansionTile(
    leading: ListImage(
      image: "path",
    ),
    // 自定义title布局,垂直排列trailing内容和原标题行
    title: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        // 原trailing的内容,现在放在title上方
        Text('12', style: TextStyle(fontSize: 16)),
        SizedBox(height: 4), // 可选:添加间距优化视觉
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              "Name",
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
            Text("Number")
          ],
        ),
      ],
    ),
    // 隐藏默认的trailing区域
    trailing: SizedBox.shrink(),
  ),
);

关键细节说明:

  • 用Column作为title的根容器,实现垂直方向的布局,将原本的trailing内容移至标题行上方
  • mainAxisSize: MainAxisSize.min确保Column仅占用自身内容所需的垂直空间,避免额外留白
  • 可通过调整crossAxisAlignment控制trailing文本的横向对齐(比如设为CrossAxisAlignment.end让其靠右)
  • trailing: SizedBox.shrink()用于隐藏ExpansionTile默认的trailing占位区域,避免布局冲突

内容的提问来源于stack exchange,提问作者Icaroto

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.09 17:02:44