Flutter布局中图片下方文本出现overflow溢出问题该如何解决

问题原因 #

你遇到的溢出问题由以下几个错误导致：

1. 外层Row布局宽度超出屏幕：你在一行内塞入了两个宽度各为(MediaQuery.of(context).size.width - 30.0) / 2的容器，再加10宽度的间距、额外的Padding和50字号的文本，总宽度远超屏幕宽度，导致右侧内容直接溢出屏幕。
2. 文本未配置溢出规则：所有Text组件没有设置自动换行、最大行数和溢出处理，长文本超出容器宽度时就会触发溢出报错。
3. 高度逻辑冲突：外层父容器固定高度为250，左侧列的内容总高度（125高度的图片 + 两个15高度的间距 + 20字号文本 + 30高度的头像行）已经超出父容器高度；同时第二个图片容器设置了350的高度，远超父容器的250高度限制，也会触发高度溢出。

修复方案 #

按以下步骤调整即可解决：

• 调整外层Row的子元素：删除放在Row末尾的额外SizedBox和Padding包裹的50字号文本，将不需要和图片行放在同一行的内容移到Row外层，避免宽度溢出。
• 给所有Text组件添加溢出配置：开启自动换行，设置最大行数和溢出样式，避免文本超出容器宽度。
• 修正高度错误：将第二个图片容器的高度从350改为250，匹配父容器高度；如果需要展示完整内容可以取消外层父容器的固定高度，让布局自适应内容高度。

修改后代码示例 #

Widget firstStyleRow(String ImgPath1, String ImgPath2, String avatarImg) {
  return Container(
    // 如果不需要固定高度可以注释掉下面这行，让内容自适应
    height: 250.0,
    padding: EdgeInsets.only(left: 10.0, right: 10.0),
    child: Row(
      children: [
        Container(
          height: 250.0,
          width: (MediaQuery.of(context).size.width - 30.0) / 2,
          child: Column(
            children: [
              Container(
                height: 125.0,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.0),
                  image: DecorationImage(
                    image: AssetImage(ImgPath1),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              SizedBox(
                height: 15.0,
              ),
              Text(
                'i like the wy to show more item',
                // 新增溢出配置
                maxLines: 2,
                softWrap: true,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(
                height: 15.0,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Container(
                    height: 30.0,
                    width: 30.0,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20.0),
                      image: DecorationImage(
                        image: AssetImage('assets/chris.jpg'),
                      ),
                    ),
                  ),
                  // 给Column套上Expanded避免文本溢出
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'mon hll',
                          textAlign: TextAlign.left,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontSize: 15.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Text(
                          '10:28 pm',
                          textAlign: TextAlign.left,
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            fontSize: 15.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ],
          ),
        ),
        SizedBox(
          width: 10.0,
        ),
        Container(
          // 修正高度错误，从350改为250
          height: 250,
          width: (MediaQuery.of(context).size.width - 30.0) / 2,
          child: Container(
            height: 250,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              image: DecorationImage(
                image: AssetImage('assets/letter.jpeg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ],
    ),
  );
}

如果你需要展示原本放在Row末尾的文本，可以将它移到当前Container的外层，和firstStyleRow的返回容器放在同一列即可。

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