Flutter中Text Widget无法换行致溢出的解决方法咨询

问题核心在于Row内部的Column未被赋予宽度约束，导致其内部的Text会无限延伸触发布局溢出。你之前单独给Text包裹Flexible/Expanded无效，是因为Column本身在Row里没有宽度限制，需要给整个Column添加约束。

修改方案 #

将包含三个Text的Column用Flexible（或Expanded）包裹，让Column自动占据Row剩余的可用宽度，内部Text就能在空间不足时自动换行。同时可给Text添加maxLines和overflow属性优化显示效果（可选）。

修改后的完整代码：

class MyEventCard extends StatelessWidget {
  const MyEventCard({
    super.key,
    required this.height,
    required this.width,
    required this.coloreChiaroSfondo,
    required this.coloreScuro,
    required this.data,
    required this.image,
    required this.sottotitolo,
    required this.titolo,
  });

  final double height;
  final double width;
  final Color coloreChiaroSfondo;
  final Color coloreScuro;
  final String image;
  final String data;
  final String titolo;
  final String sottotitolo;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {},
      child: Container(
        margin: EdgeInsets.symmetric(vertical: height * 0.005),
        padding: EdgeInsets.symmetric(
            horizontal: width * 0.02, vertical: width * 0.02),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(width * 0.02)),
          color: coloreChiaroSfondo,
          border: Border.all(
            color: coloreScuro, // Colore del bordo
            width: width * 0.001, // Larghezza del bordo
          ),
        ),
        child: Row(
          children: [
            Container(
              constraints: BoxConstraints(
                  maxHeight: height * 0.4, maxWidth: width * 0.25),
              child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(width * 0.01)),
                child: Image.asset(
                  image,
                  fit: BoxFit.cover,
                ),
              ),
            ),
            // 关键修改：用Flexible包裹整个Column
            Flexible(
              child: Padding(
                padding: EdgeInsets.symmetric(horizontal: width * 0.04),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      data,
                      style:
                          TextStyle(color: coloreScuro, fontSize: width * 0.035),
                      // 可选：限制行数并处理溢出
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    Text(
                      titolo,
                      style: TextStyle(
                        color: coloreScuro,
                        fontWeight: FontWeight.bold,
                        fontSize: width * 0.035,
                      ),
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                    Text(
                      sottotitolo,
                      style: TextStyle(
                        color: coloreScuro,
                        fontWeight: FontWeight.bold,
                        fontSize: width * 0.035,
                      ),
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
              ),
            ),
            // 移除多余的Expanded SizedBox，避免占用Column的可用空间
            IconButton(
                onPressed: () {
                  debugPrint('puntini premuti');
                },
                icon: Icon(
                  Icons.favorite_outline,
                  size: width * 0.06,
                  color: coloreScuro,
                ))
          ],
        ),
      ),
    );
  }
}

关键说明 #

1. Flexible约束Column宽度：Row中固定宽度的图片和IconButton之外的空间，全部交给Flexible包裹的Column，让Column的宽度被限制在合理范围内，内部Text就能根据空间自动换行。
2. 移除冗余占位组件：原来的Expanded SizedBox会抢占Column的可用空间，移除后布局分配更合理。
3. Text的溢出处理：maxLines和overflow是可选配置，能避免文本过多时过度换行，用省略号提示用户存在更多内容。

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