如何为Flutter的ExpansionTile Card组件添加顶部彩条与编辑按钮

我用ExpansionTileCard组件展示订单历史，点击可展开显示额外信息，但不知道怎么在未展开状态下的标题区域添加编辑按钮和状态文本，需要把指定的按钮代码整合到标题区域。

修改后的完整代码 #

_listItemColumn({
  required String name,
  required String date,
  required String status,
  required String id,
}) {
  return Column(
    children: [
      Padding(
        padding: const EdgeInsets.fromLTRB(
            Margins.medium, Margins.tiny, Margins.tiny, Margins.small),
        child: ExpansionTileCard(
          // 自定义title为Row，实现左右布局
          title: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // 左侧：名称和日期
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      name,
                      maxLines: 2,
                      style: const TextStyle(
                        fontSize: FontSize.medium,
                        fontWeight: FontWeight.w300,
                      ),
                    ),
                    SizedBox(height: Margins.tiny),
                    Text(
                      date,
                      maxLines: 1,
                      style: TextStyle(
                        color: Colorz.textGray,
                        overflow: TextOverflow.ellipsis,
                        fontSize: FontSize.small,
                      ),
                    ),
                  ],
                ),
              ),
              // 右侧：操作按钮和状态文本
              Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Material(
                    color: Colorz.white,
                    child: InkWrapper(
                      splashColor: Colorz.lighterGray,
                      child: IconButton(
                        alignment: Alignment.center,
                        icon: SvgPicture.asset(
                          Img.listItemMenu,
                        ),
                        onPressed: null,
                      ),
                      onTap: () {
                        // 这里添加按钮点击逻辑
                      },
                    ),
                  ),
                  Text(
                    status,
                    maxLines: 1,
                    style: TextStyle(
                      color: _colorStatus(status),
                      overflow: TextOverflow.ellipsis,
                      fontSize: FontSize.tiny,
                    ),
                  ),
                ],
              ),
            ],
          ),
          trailing: SizedBox.shrink(), // 隐藏默认展开箭头（不需要可删除）
          // 展开后显示的额外信息
          children: [
            Padding(
              padding: const EdgeInsets.all(Margins.medium),
              child: Text("订单ID: $id"),
            ),
          ],
        ),
      ),
    ],
  );
}

修改说明 #

• 移除原subtitle属性，将名称和日期整合到title的左侧Column中，避免布局冲突
• 通过Row将标题区域拆分为左右两部分，左侧展示订单基础信息，右侧放置操作按钮和状态文本
• 保留trailing: SizedBox.shrink()隐藏默认展开箭头，若需要显示箭头可直接删除该行
• 右侧操作按钮和状态文本直接使用你提供的代码，确保样式与需求一致

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