如何在Flutter中实现带标题上方文本的ExpansionTile

我需要实现示例图中的ExpansionTile样式，已尝试编写如下代码：

Padding(
      padding: const EdgeInsets.only(right: 30, left: 30, bottom: 20),
      child: Container(
        decoration: boxDecoration,
        child: const ExpansionTile(
          collapsedIconColor: Colors.white,
          iconColor: Colors.white,
          tilePadding: EdgeInsets.only(left: 5, right: 20, top: 5, bottom: 5),
          leading: NotifyIcon(
            size: 20,
          ),
          title: Text('Title'),
          subtitle: Text('09:15 AM'),
        ),
      ),
    );

当前得到的输出如对应图片所示，但原生ExpansionTile没有添加标题上方文本的选项，请问如何实现该效果？

有两种实用方法可以实现这个需求：

方法一：自定义ExpansionTile的title组件 #

将原有的title替换为Column组件，就能在原有标题上方插入额外文本，同时保留ExpansionTile的所有原生交互和动画：

Padding(
  padding: const EdgeInsets.only(right: 30, left: 30, bottom: 20),
  child: Container(
    decoration: boxDecoration,
    child: ExpansionTile(
      collapsedIconColor: Colors.white,
      iconColor: Colors.white,
      tilePadding: EdgeInsets.only(left: 5, right: 20, top: 5, bottom: 5),
      leading: NotifyIcon(size: 20),
      // 用Column组合顶部文本和原标题
      title: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            '标题上方的文本',
            style: TextStyle(fontSize: 12, color: Colors.grey),
          ),
          SizedBox(height: 4),
          Text('Title'),
        ],
      ),
      subtitle: Text('09:15 AM'),
    ),
  ),
);

方法二：在ExpansionTile外层嵌套静态文本（不跟随折叠动画） #

如果顶部文本不需要参与ExpansionTile的展开/折叠动画，可以将其放在Container内部、ExpansionTile的上方：

Padding(
  padding: const EdgeInsets.only(right: 30, left: 30, bottom: 20),
  child: Container(
    decoration: boxDecoration,
    child: Column(
      children: [
        // 独立的顶部文本，手动对齐leading的位置
        Padding(
          padding: EdgeInsets.only(left: 65, top: 10),
          child: Text(
            '标题上方的文本',
            style: TextStyle(fontSize: 12, color: Colors.grey),
          ),
        ),
        ExpansionTile(
          collapsedIconColor: Colors.white,
          iconColor: Colors.white,
          tilePadding: EdgeInsets.only(left: 5, right: 20, top: 5, bottom: 5),
          leading: NotifyIcon(size: 20),
          title: Text('Title'),
          subtitle: Text('09:15 AM'),
        ),
      ],
    ),
  ),
);

选择建议 #

• 方法一的文本会跟随ExpansionTile的标题一起触发点击反馈和动画，适合需要整体交互的场景
• 方法二的文本是静态元素，仅作为装饰存在，适合不需要交互的场景

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