Flutter中RenderBox未布局及RenderFlex约束异常求助

遇到的异常 #

Another exception was thrown: RenderFlex children have non-zero flex but incoming width constraints are unbounded.
Another exception was thrown: RenderBox was not laid out: RenderFlex#97324 relayoutBoundary=up40 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

问题场景 #

子项数量动态变化，不能给SingleChildScrollView设置固定高度，尝试用Expanded包裹无效。

现有代码 #

_body 代码 #

var _body = Builder(builder: (BuildContext context) {
return Padding(
  padding: EdgeInsets.only(
      top: 340),
  child: Column(
    children: [
      SizedBox(height: 10),
      _customWidget,
      SizedBox(height: 10),
      Expanded(
        child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                CustomWidget(
                  txt: 'item1',
                  txt2: 'info',
                  callback: () {
                    _showDialog(context);
                  },
                ),
                CustomWidget(
                  txt: 'item1',
                  txt2: 'info',
                  callback: () {
                    _showDialog(context);
                  },
                ),
                CustomWidget(
                  txt: 'item1',
                  txt2: 'info',
                  callback: () {
                    _showDialog(context);
                  },
                ),
                _customWidget,
                _customWidget,
              ],
            )),
      )
    ],
  ),
);

页面build代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: AppColors.mainColor,
    body: Container(
      child: Stack(
        children: <Widget>[
          _body,
        ],
      ),
    ),
  );
}

CustomWidget代码 #

class CustomWidget extends StatelessWidget {
  final String txt;
  final String? txt2;
  final GestureTapCallback? callback;

  SettingsItemWidget({
    required this.txt,
    this.txt2,
    this.callback,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        if (callback != null) {
          callback!();
        }
      },
      child: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 25.0, left: 30.0),
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(right: 10.0),
                      child: Text(
                        txt,
                        style: TextStyle(
                          fontSize: 16,
                          color: Colors.white,
                          fontWeight: FontWeight.w500,
                          fontFamily: "Sofia",
                        ),
                      ),
                    ),
                  ],
                ),
                Flexible(
                  child: Padding(
                      padding: const EdgeInsets.only(right:20.0),10.0),
                      child: Text(
                        txt2 ?? '',
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          fontSize: 14,
                          color: Colors.grey[400],
                          fontWeight: FontWeight.w300,
                          fontFamily: "Sofia",
                        ),
                      )),
                ),
              ],
            ),
          ),
          SizedBox(
            height: 20.0,
          ),
          Container(
            height: 0.1,
            color: Colors.white70,
          )
        ],
      ),
    );
  }
}

问题分析与修复步骤 #

1. 核心布局约束问题 #

Stack的子元素默认不受父级约束限制（宽度无界），导致外层Column无法确定自身宽度，里面的Expanded无法正确分配剩余空间。解决方法：给外层Column添加宽度约束，让它占满父级宽度。

修改后的_body代码：

var _body = Builder(builder: (BuildContext context) {
return Padding(
  padding: EdgeInsets.only(top: 340),
  child: ConstrainedBox(
    constraints: BoxConstraints.expand(width: double.infinity),
    child: Column(
      children: [
        SizedBox(height: 10),
        _customWidget,
        SizedBox(height: 10),
        Expanded(
          child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Column(
                mainAxisSize: MainAxisSize.min, // 改为min，让Column高度适配子项
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  // 子项保持不变
                  CustomWidget(
                    txt: 'item1',
                    txt2: 'info',
                    callback: () {
                      _showDialog(context);
                    },
                  ),
                  CustomWidget(
                    txt: 'item1',
                    txt2: 'info',
                    callback: () {
                      _showDialog(context);
                    },
                  ),
                  CustomWidget(
                    txt: 'item1',
                    txt2: 'info',
                    callback: () {
                      _showDialog(context);
                    },
                  ),
                  _customWidget,
                  _customWidget,
                ],
              )),
        )
      ],
    ),
  ),
);

2. CustomWidget语法错误修复 #

• 构造函数名错误：SettingsItemWidget应改为CustomWidget
• Padding参数错误：EdgeInsets.only(right:20.0),10.0是无效语法，修正为正确的边距配置

修复后的CustomWidget：

class CustomWidget extends StatelessWidget {
  final String txt;
  final String? txt2;
  final GestureTapCallback? callback;

  CustomWidget({
    required this.txt,
    this.txt2,
    this.callback,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: callback?.call,
      child: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 25.0, left: 30.0, right: 20.0),
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  txt,
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.white,
                    fontWeight: FontWeight.w500,
                    fontFamily: "Sofia",
                  ),
                ),
                Flexible(
                  child: Text(
                    txt2 ?? '',
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.grey[400],
                      fontWeight: FontWeight.w300,
                      fontFamily: "Sofia",
                    ),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 20.0),
          Container(height: 0.1, color: Colors.white70),
        ],
      ),
    );
  }
}

3. 优化说明 #

• 将SingleChildScrollView内的ColumnmainAxisSize设为MainAxisSize.min，避免Column试图占用无界高度，确保滚动功能正常。
• 简化CustomWidget中的嵌套Row结构，去掉不必要的层级嵌套。
• 用callback?.call替代原有的空判断逻辑，代码更简洁。

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