Flutter中RenderFlex右侧溢出126像素问题求助及解决方案咨询

这个问题在Flutter布局里挺常见的，咱们一步步拆解解决：

问题根源 #

你碰到的RenderFlex overflowed by 126 pixels on the right错误，本质有两个原因：

1. Row是水平布局组件，里面的Text默认只显示一行，内容过长时会直接超出Row的可用宽度，导致溢出；
2. 外层Container设置了固定的height:76，就算文本能换行，固定高度也会限制容器无法跟着内容自动调整高度。

解决方案 #

只需要做两个关键调整，就能同时解决溢出和高度自适应的问题：

• 移除Container的固定height属性，让容器根据子组件的内容自动拉伸高度；
• 用Flexible包裹Text组件，给文本分配Row里的剩余空间，让它能自动换行；
• 显式设置Text的maxLines: null（或softWrap: true），确保文本允许换行显示。

修改后的完整代码 #

ListView.builder(
  itemCount: 5,
  padding: EdgeInsets.only(left: 16, right: 16),
  shrinkWrap: true,
  itemBuilder: (context, index) {
    return Container(
      // 移除固定height，让容器自适应内容高度
      margin: EdgeInsets.only(bottom: 13),
      padding: EdgeInsets.only(left: 24, top: 12, bottom: 12, right: 22),
      decoration: BoxDecoration(
        color: Color(0xFFFFFFFF),
        borderRadius: BorderRadius.circular(15),
        boxShadow: [
          BoxShadow(
            offset: Offset(0, 10),
            blurRadius: 50,
            color: kPrimaryColor.withOpacity(0.23))
        ]),
      child: Row(
        children: <Widget>[
          Row(
            children: <Widget>[
              Container(
                height: 57,
                width: 57,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  image: DecorationImage(
                    image: AssetImage( "assets/images/image_1.png"))),
              ),
              SizedBox(width: 13),
              // 用Flexible包裹Text，分配剩余空间实现自动换行
              Flexible(
                child: Text(
                  "testing123451 testing123451 testing123451 testing123451",
                  maxLines: null, // 允许文本显示任意行数
                  softWrap: true, // 开启自动换行
                ),
              ),
            ],
          )
        ],
      ),
    );
  })

小补充 #

如果希望文本所在区域强制填满Row的剩余空间，可以把Flexible换成Expanded，两者的区别是：Flexible只会占据可用空间，不会强制撑满；Expanded会强制填满剩余空间，根据你的需求选就行。

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