Flutter中Stack组件嵌套进ListView触发布局报错问题解决

该报错是Flutter布局约束冲突导致：

1. 垂直滚动的ListView在布局子组件时，垂直方向会传递无界约束（不限制子组件的最大高度）
2. 你编写的Stack组件内所有子元素都是Positioned定位组件，这类组件不会参与Stack自身的尺寸计算，Stack在无明确高度约束的场景下，无法算出自身的实际大小，就会触发hasSize断言失败。
3. 直接将Stack作为Scaffold的body时，父组件会传递屏幕可用高度的固定约束，Stack可以正常完成布局，因此不会报错。

两种方案都可以实现ListView中嵌入Stack的需求，任选其一即可：

• 方案一：在外层给Stack指定明确高度
  给Stack外层包裹SizedBox并设置符合UI需求的固定高度，让Stack拿到明确的高度约束完成布局，示例代码：

  body: ListView(
    scrollDirection: Axis.vertical,
    children: [
      // 高度值根据你UI的实际显示需求调整，预留够所有定位元素的显示空间
      SizedBox(
        height: 230,
        child: stackW()!,
      )
    ],
  )
  

• 方案二：在Stack内部添加非定位组件撑开尺寸
  Stack的尺寸默认由非定位子组件决定，你可以在Stack的children列表首位添加一个非定位的尺寸组件，不需要依赖父组件约束就能确定Stack自身尺寸，修改后的stackW代码如下：

  Widget? stackW() {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        // 新增非定位尺寸组件，撑开Stack
        const SizedBox(
          height: 230,
          width: double.infinity,
        ),
        // 原有Positioned组件保持不变
        Positioned(
          top: 70,
          width: MediaQuery.of(context).size.width * .9,
          height: 150,
          child: Center(
            child: Container(
              width: MediaQuery.of(context).size.width * .9,
              decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.circular(15)),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text(
                    "Product Designer",
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                ],
              ),
            ),
          ),
        ),
        Positioned(
          top: 30,
          left: MediaQuery.of(context).size.width / 2.5,
          width: 80,
          height: 80,
          child: CircleAvatar(
            backgroundColor: Colors.white,
            child: CircleAvatar(
              backgroundColor: Colors.green[100],
              radius: 35,
              child: const FaIcon(
                FontAwesomeIcons.apple,
                size: 30,
                color: Colors.black,
              ),
            ),
          ),
        ),
      ],
    );
  }
  

提示：设置的高度值需要覆盖所有定位元素的显示范围，避免出现内容裁切。如果后续要做列表循环渲染，只需要把带固定高度的Stack作为ListView的item即可。

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