Flutter中Stack嵌套Column用Positioned报错：RenderFlex溢出无限像素

错误原因解析 #

你遇到的两个问题（ParentDataWidget不兼容和底部无限溢出）其实是关联的：

1. ParentData不兼容：Positioned是专门为Stack设计的ParentDataWidget，它会给子组件添加StackParentData类型的布局数据，只有Stack的渲染对象能处理这种数据。但在你的代码里，Stack放在Column中，且Stack的所有子组件都是Positioned——此时Stack会因为没有非定位子组件来确定自身尺寸，直接收缩成0x0的空白区域。这就导致布局系统混乱，错误地把Positioned的父组件识别成了Column（而Column只接受FlexParentData），从而抛出类型不兼容的错误。
2. 底部无限溢出：因为Stack尺寸为0，Positioned的组件完全脱离了Stack的布局范围，Column无法约束这个组件的位置，最终引发无限溢出的警告。

至于移除left:10.0后能正常运行，是因为此时Positioned失去了定位属性，会被当作普通组件处理——Stack会根据Card的尺寸（200x100）来确定自身大小，Column能正常约束Stack的布局，自然不会报错。

解决方案 #

这里提供三种可行的修复方案，你可以根据业务场景选择：

方案1：给Stack设置明确的固定尺寸

直接指定Stack的宽高，让它有明确的布局空间，Positioned就能正常在Stack内部定位：

import "package:flutter/material.dart";
class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Example")),
        body: Column(children: [
          Stack(
            // 设置Stack的宽高，适配你的需求
            width: MediaQuery.of(context).size.width,
            height: 200,
            children: [cardWidget()]
          )
        ]),
      ),
    );
  }
  Widget cardWidget() {
    return Positioned(
      left: 10.0,
      child: Card(color: Colors.green, child: Container(height: 200, width: 100)),
    );
  }
}

方案2：添加非Positioned的占位组件

在Stack中加入一个占位组件，让Stack根据这个组件确定自身尺寸，同时不影响Positioned组件的重叠效果：

import "package:flutter/material.dart";
class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Example")),
        body: Column(children: [
          Stack(children: [
            // 占位组件，让Stack获得尺寸
            Container(height: 200, width: double.infinity),
            cardWidget()
          ])
        ]),
      ),
    );
  }
  Widget cardWidget() {
    return Positioned(
      left: 10.0,
      child: Card(color: Colors.green, child: Container(height: 200, width: 100)),
    );
  }
}

方案3：让Stack占据Column的可用空间

如果希望Stack自适应Column的剩余空间，可以用Expanded包裹Stack，并设置fit: StackFit.expand让Stack填满可用空间：

import "package:flutter/material.dart";
class TestScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Example")),
        body: Column(children: [
          Expanded(
            child: Stack(
              fit: StackFit.expand,
              children: [cardWidget()]
            )
          )
        ]),
      ),
    );
  }
  Widget cardWidget() {
    return Positioned(
      left: 10.0,
      child: Card(color: Colors.green, child: Container(height: 200, width: 100)),
    );
  }
}

内容的提问来源于stack exchange，提问作者mr.bjerre