Flutter中Stack调用自定义Positioned方法报'!_debugDoingThisLayout'错误原因

这个报错的核心原因是：你用普通函数返回Positioned组件，而Flutter在Stack布局阶段的调试断言会严格检查组件构建时机——当Stack正在执行布局（_debugDoingThisLayout标记为true）时，调用普通函数返回Widget会触发额外的组件构建逻辑，打破了Flutter布局流程的状态约束，导致断言失败。

而直接把Container写在Stack子元素里时，是直接声明Widget实例，完全符合Widget树的构建流程，不会触发这种冲突。

解决方法 #

把普通函数改成StatelessWidget，让它成为标准的Widget节点，就能适配Flutter的布局流程：

class ActivitiesUsers extends StatelessWidget {
  final double positioned;
  final String image;

  const ActivitiesUsers({Key? key, required this.positioned, required this.image}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: positioned,
      child: Container(
        padding: EdgeInsets.all(1),
        height: 30,
        width: 30,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          border: Border.all(
            color: darkblue.withOpacity(0.75),
          ),
        ),
        child: ClipOval(
          child: Image.network(
            image,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

然后在Stack里这样调用：

Row(
  children: [
    Stack(
      fit: StackFit.loose,
      clipBehavior: Clip.none,
      children: [
        ActivitiesUsers(positioned: 0, image: 'https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=600'),
        ActivitiesUsers(positioned: 14, image: 'https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=600'),
        ActivitiesUsers(positioned: 28, image: 'https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=600')
      ],
    )
  ],
)

简单来说，Flutter的布局系统对Widget的创建时机有严格要求，标准的Widget类（比如StatelessWidget）会遵循框架的生命周期，而普通函数返回Widget的方式在特定布局场景下会干扰框架的状态检查，导致断言报错。

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