Flutter中带BoxDecoration的项目卡片内Text文本被截断如何解决

问题原因 #

文字截断的核心是卡片容器缺少明确高度约束，Image加载后占用了过多垂直空间，导致Expanded分配给Text的空间不足以完整展示文字。

解决方法 #

优先通过约束图片和卡片的高度来预留文字展示空间，同时可给Text增加溢出兜底配置，修改后的参考代码如下：

// 外层卡片Container增加height约束，可根据设计调整数值
Container(
  height: 240,
  margin: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: _borderRadius,
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: const Offset(0, 2),
      ),
    ],
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: [
      // 给图片区域增加固定高度约束
      Container(
        height: 180,
        child: Image.network(
          widget.image,
          fit: BoxFit.cover,
        ),
      ),
      // 替换原Expanded，用内边距控制文字区域间距更可控
      Container(
        padding: const EdgeInsets.symmetric(vertical: 8),
        child: const Text(
          "ROK IMAGES",
          style: TextStyle(
            color: Colors.red,
            fontWeight: FontWeight.bold,
          ),
          // 溢出兜底配置，文字过长时自动省略不报错
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
        ),
      ),
    ],
  ),
)

如果不想固定卡片高度，也可以通过flex权重分配空间：将Image放在Expanded(flex: 3)中，Text放在Expanded(flex: 1)中，按比例分配垂直空间即可避免挤压。

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