在SimpleDialog中使用横向ListView报错：RenderShrinkWrappingViewport不支持固有尺寸

在SimpleDialog中使用横向（Axis.horizontal）滚动的ListView并包含复选框时，触发错误：RenderShrinkWrappingViewport does not support returning intrinsic dimensions。改为纵向滚动（Axis.vertical）可正常运行，推测是Dialog嵌套场景的布局约束导致问题。已尝试用Container、Flexible、SizedBox包裹ListView，但报错仍未解决。

相关代码 #

初始代码 #

@override
Widget build(BuildContext context) => SimpleDialog(
        backgroundColor: Color.fromARGB(255, 229, 233, 240),
        contentPadding: EdgeInsets.zero,
        children: [
          Expanded(
            child: ListView(
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              children: [
                ...personCheckboxes.map(buildCheckboxes).toList(),
              ],
            ),
          ),

buildCheckboxes函数 #

Widget buildCheckboxes(CheckBoxState checkbox) => CheckboxListTile(
        controlAffinity: ListTileControlAffinity.leading,
        activeColor: Colors.blue,
        value: checkbox.checked,
        title: Text(checkbox.title, style: const TextStyle(fontSize: 12)),
        onChanged: (value) => setState(() {
          checkbox.checked = value!;
          if (checkbox.value == 'M') {
            maleChecked = checkbox.checked;
          } else if (checkbox.value == 'F') {
            femaleChecked = checkbox.checked;
          }
          checkResults();

          setState(() {});
          //runFilterCheckbox(checkbox.value, value);
        }),
      );

尝试过的包裹方式 #

Container包裹

@override
Widget build(BuildContext context) => SimpleDialog(
        backgroundColor: Color.fromARGB(255, 229, 233, 240),
        contentPadding: EdgeInsets.zero,
        children: [
          Container(
            height: 100.0,
            width: 100.0,
            child: ListView(
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              children: [
                ...personCheckboxes.map(buildCheckboxes).toList(),
              ],
            ),
          ),

SizedBox包裹

@override
Widget build(BuildContext context) => SimpleDialog(
        backgroundColor: Color.fromARGB(255, 229, 233, 240),
        contentPadding: EdgeInsets.zero,
        children: [
          SizedBox(
            height: 20.0,
            width: double.maxFinite,
            child: ListView(
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
              children: [
                ...personCheckboxes.map(buildCheckboxes).toList(),
              ],
            ),
          ),

解决方法 #

问题根源在于shrinkWrap: true结合横向滚动时，RenderShrinkWrappingViewport无法正确计算内在尺寸，再加上Dialog的布局约束限制，导致报错。可通过以下两种方式解决：

1. 移除shrinkWrap: true并指定明确高度 #

横向滚动的ListView需要明确的高度约束，Dialog的子组件无默认高度，因此需给ListView设置固定高度（适配CheckboxListTile的高度），同时去掉shrinkWrap（横向滚动场景下无需收缩高度）。

修改后的代码示例：

@override
Widget build(BuildContext context) => SimpleDialog(
      backgroundColor: Color.fromARGB(255, 229, 233, 240),
      contentPadding: EdgeInsets.zero,
      children: [
        SizedBox(
          height: 60, // 适配CheckboxListTile的高度
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: [
              ...personCheckboxes.map(buildCheckboxes).toList(),
            ],
          ),
        ),
      ],
    );

2. 使用SingleChildScrollView替代ListView #

如果列表项数量不多，可直接用SingleChildScrollView包裹Row实现横向滚动，规避ListView的shrinkWrap问题：

@override
Widget build(BuildContext context) => SimpleDialog(
      backgroundColor: Color.fromARGB(255, 229, 233, 240),
      contentPadding: EdgeInsets.zero,
      children: [
        SizedBox(
          height: 60,
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: personCheckboxes.map(buildCheckboxes).toList(),
            ),
          ),
        ),
      ],
    );

注意：CheckboxListTile本身是纵向布局组件，横向排列时需确保高度足够，避免内容被截断。

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