如何通过Card配置ExpansionTile/ListTile并添加额外图文元素

问题说明 #

我想用Card组件搭配ExpansionTile/ListTile实现目标样式，目前已经完成左侧图片、标题、副标题和尾部元素的布局，现在需要在标题与尾部元素之间添加第二个图片或文本。现有代码如下：

return Card(
    child: ExpansionTile(
      leading: ListImage(
        image: "Image",
      ),
      title: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text("Title"),
        ],
      ),
      subtitle: Text("subtitle"),
      trailing: Column(
        children: [
          Text('11'),
        ],
      ),
      children: [],
    ),
  );

实现方法 #

ExpansionTile的title支持自定义任意Widget，我们可以通过扩展title里的Row布局，直接加入需要的中间元素（图片或文本），具体代码修改如下：

示例1：添加图片元素

return Card(
  child: ExpansionTile(
    leading: ListImage(
      image: "Image",
    ),
    title: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text("Title"),
        // 新增的中间图片，可根据需求调整尺寸
        Image.network("https://example.com/your-image.png", width: 28, height: 28),
      ],
    ),
    subtitle: Text("subtitle"),
    trailing: Column(
      children: [
        Text('11'),
      ],
    ),
    children: [],
  ),
);

示例2：添加文本元素

return Card(
  child: ExpansionTile(
    leading: ListImage(
      image: "Image",
    ),
    title: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text("Title"),
        // 新增的中间文本
        Text("中间内容"),
      ],
    ),
    subtitle: Text("subtitle"),
    trailing: Column(
      children: [
        Text('11'),
      ],
    ),
    children: [],
  ),
);

优化布局（避免标题被挤压）

如果担心中间元素会挤压标题文本，可使用Expanded组件包裹标题，确保标题有足够的显示空间：

title: Row(
  children: [
    Expanded(
      child: Text("Title", overflow: TextOverflow.ellipsis),
    ),
    SizedBox(width: 10), // 标题与中间元素的间距
    Text("中间内容"),
  ],
),

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