Flutter卡片结构实现疑问：使用ListTile是否决策错误？

用ListTile本身不是错误决策，但你的布局结构没匹配目标卡片的样式，才导致了溢出和效果不达预期的问题：

• 你当前用Column把图片和ListTile纵向堆叠，但目标卡片明显是图片居左、文字在右侧横向排列的结构，纵向布局会导致文字区域宽度受限，触发溢出。
• ListTile默认会占满父容器宽度，放在Column里加上外层Padding，很容易出现横向空间不足的情况。

修正方案 #

把纵向的Column换成横向的Row，同时给文字区域留出足够的自适应空间，以下是调整后的代码：

SizedBox(
  child: ListView.builder(
    scrollDirection: Axis.vertical,
    physics: const NeverScrollableScrollPhysics(),
    shrinkWrap: true,
    itemCount: campSites.length,
    itemBuilder: (context, index) {
      Map<String, dynamic> campSite = campSites[index];
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              height: 99,
              width: 94,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(15),
                child: CachedNetworkImage(
                  imageUrl: campSite['image'],
                  imageBuilder: (context, imageProvider) => Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: imageProvider,
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  placeholder: (context, url) =>
                      const CircularProgressIndicator(),
                  errorWidget: (context, url, error) =>
                      const Icon(Icons.error),
                ),
              ),
            ),
            const SizedBox(width: 12), // 图片与文字的间距
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(campSite['name'],
                      style: const TextStyle(fontWeight: FontWeight.bold)),
                  const SizedBox(height: 4),
                  Text('${campSite['location']} away'),
                ],
              ),
            ),
          ],
        ),
      );
    },
  ),
);

关键修改说明 #

1. 用Row替代Column，实现图片和文字的横向排列，匹配目标卡片结构。
2. 用Expanded包裹文字区域，让文字自动填充图片之外的剩余空间，彻底解决横向溢出问题。
3. 去掉ListTile，直接用Column承载文字，避免ListTile自带的默认布局限制，让样式更灵活可控（如果坚持要用ListTile，把它放在Expanded内部也可以）。
4. 添加了合理的间距，优化整体视觉效果。

内容的提问来源于stack exchange，提问作者Mustafa-Aygar