Flutter中Row内ConstrainedBox的minWidth约束失效问题

当ConstrainedBox放在Row组件内部时，设置的minWidth约束会被忽略，只有把ConstrainedBox移出Row、调整布局结构后，约束才能正常生效。

不生效的代码示例 #

@override
Widget build(BuildContext context) {
  return Container(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            ConstrainedBox(
              constraints: BoxConstraints(minWidth: 50, maxWidth: 250),
              child: AppTextField(
                topMargin: 0,
                controller: TextEditingController(),
                hideLable: true,
                onChange: (v) {},
                hintText: AppStrings.hSearch,
              ),
            ),
          ],
        ),
      ],
    ),
  );
}

生效的代码示例 #

@override
Widget build(BuildContext context) {
  return Container(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        ConstrainedBox(
          constraints: BoxConstraints(minWidth: 50, maxWidth: 250),
          child: AppTextField(
            topMargin: 0,
            controller: TextEditingController(),
            hideLable: true,
            onChange: (v) {},
            hintText: AppStrings.hSearch,
          ),
        ),
      ],
    ),
  );
}

效果对比 #

问题原因 #

当Row设置mainAxisSize: MainAxisSize.min时，它会根据子组件的实际尺寸收缩自身宽度。此时Row传递给内部ConstrainedBox的宽度约束是“不超过Row自身的宽度”，直接覆盖了ConstrainedBox的minWidth设置，导致约束失效。把ConstrainedBox移到Row外层后，约束直接作用在TextField的父级布局上，就能正常限制宽度的最小/最大值了。

内容的提问来源于stack exchange，提问作者Ahmed Iqbal teli