Flutter报错：Positioned组件ParentDataWidget使用不当排查

错误信息 #

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.

The ParentDataWidget Positioned wants to apply ParentData of type StackParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.

Usually, this means that the Positioned widget has the wrong ancestor RenderObjectWidget. Typically, Positioned widgets are placed directly inside Stack widgets.
The offending Positioned is currently placed inside a ColorFiltered widget.

The ownership chain for the RenderObject that received the incompatible parent data was:
  Semantics ← VectorGraphic ← SvgPicture ← Positioned ← ColorFiltered ← Align ← Stack ← Align ← SizedBox ← TopRanking ← ⋯
When the exception was thrown, this was the stack

问题描述 #

之前在Row/Column外误用Expanded时会碰到这类错误，但本次错误和Expanded无关。根据错误栈：Semantics ← VectorGraphic ← SvgPicture ← Positioned ← ColorFiltered ← Align ← Stack ← Align ← SizedBox ← TopRanking ← ⋯，需要排查代码中哪个组件导致问题。

代码片段 #

class TopRanking extends StatelessWidget {
  const TopRanking({super.key});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    return SizedBox(
      height: size.height * 0.22,
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Stack(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Stack(
                  clipBehavior: Clip.none,
                  alignment: Alignment.center,
                  children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        Container(
                          width: size.width * 0.15,
                          height: size.width * 0.15,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: Colors.grey.shade200,
                              width: 2,
                            ),
                          ),
                          child: Center(
                            child: CircleAvatar(
                              radius: size.width * 0.06,
                              backgroundColor: Colors.blue,
                            ),
                          ),
                        ),
                        Gaps.v8,
                        const Text(
                          "김진솔",
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.w800,
                            fontSize: Sizes.size18,
                          ),
                        ),
                        Gaps.v4,
                        Text(
                          "1000점",
                          style: TextStyle(
                            color: Colors.grey.shade600,
                            fontSize: Sizes.size14,
                          ),
                        ),
                      ],
                    ),
                    Positioned(
                      top: size.height * 0.05,
                      right: size.width * 0.08,
                      child: Image.asset(
                        "assets/ranking/silver.png",
                        width: size.width * 0.09,
                      ),
                    ),
                  ],
                ),
                Stack(
                  clipBehavior: Clip.none,
                  alignment: Alignment.center,
                  children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        Container(
                          width: size.width * 0.2,
                          height: size.width * 0.2,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: Colors.grey.shade200,
                              width: 2,
                            ),
                          ),
                          child: Center(
                            child: CircleAvatar(
                              radius: size.width * 0.085,
                              backgroundColor: Colors.amber,
                            ),
                          ),
                        ),
                        Gaps.v8,
                        const Text(
                          "허이랑",
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.w800,
                            fontSize: Sizes.size18,
                          ),
                        ),
                        Gaps.v4,
                        Text(
                          "2000점",
                          style: TextStyle(
                            color: Colors.grey.shade600,
                            fontSize: Sizes.size14,
                          ),
                        ),
                      ],
                    ),
                    Positioned(
                      top: -size.height * 0.01,
                      child: Image.asset(
                        "assets/ranking/gold.png",
                        width: size.width * 0.2,
                      ),
                    ),
                  ],
                ),
                Stack(
                  clipBehavior: Clip.none,
                  alignment: Alignment.center,
                  children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        Container(
                          width: size.width * 0.15,
                          height: size.width * 0.15,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: Colors.grey.shade200,
                              width: 2,
                            ),
                          ),
                          child: Center(
                            child: CircleAvatar(
                              radius: size.width * 0.06,
                              backgroundColor: Colors.red,
                            ),
                          ),
                        ),
                        Gaps.v8,
                        const Text(
                          "신지원",
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                            color: Colors.black,
                            fontWeight: FontWeight.w800,
                            fontSize: Sizes.size18,
                          ),
                        ),
                        Gaps.v4,
                        Text(
                          "800점",
                          style: TextStyle(
                            color: Colors.grey.shade600,
                            fontSize: Sizes.size14,
                          ),
                        ),
                      ],
                    ),
                    Positioned(
                      top: size.height * 0.05,
                      right: size.width * 0.08,
                      child: Image.asset(
                        "assets/ranking/bronze.png",
                        width: size.width * 0.09,
                      ),
                    ),
                  ],
                ),
              ],
            ),
            Align(
              alignment: Alignment.topRight,
              child: ColorFiltered(
                colorFilter: const ColorFilter.mode(
                  Color.fromARGB(100, 92, 7, 228),
                  BlendMode.srcIn,
                ),
                child: Positioned(
                  child: SvgPicture.asset(
                    "assets/svg/more.svg",
                    width: 27,
                    height: 27,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

错误原因与修复 #

错误定位 #

问题出在最外层Stack的第二个子组件里：Align → ColorFiltered → Positioned。

Positioned是一个ParentDataWidget，它必须直接作为Stack的子组件使用，因为它需要给父级Stack的渲染对象传递StackParentData数据。而这里的Positioned被嵌套在ColorFiltered内部，导致它的父级变成了ColorFiltered，无法正确传递所需的父数据，从而触发错误。

修复方案 #

你有两种修复方式：

1. 移除多余的Positioned，因为已经用Align来定位到右上角了，不需要再用Positioned：

Align(
  alignment: Alignment.topRight,
  child: ColorFiltered(
    colorFilter: const ColorFilter.mode(
      Color.fromARGB(100, 92, 7, 228),
      BlendMode.srcIn,
    ),
    child: SvgPicture.asset(
      "assets/svg/more.svg",
      width: 27,
      height: 27,
    ),
  ),
)

2. 如果需要用Positioned来更精确控制位置，把ColorFiltered放在Positioned的子节点里，让Positioned直接作为Stack的子组件：

Positioned(
  top: 0,
  right: 0,
  child: ColorFiltered(
    colorFilter: const ColorFilter.mode(
      Color.fromARGB(100, 92, 7, 228),
      BlendMode.srcIn,
    ),
    child: SvgPicture.asset(
      "assets/svg/more.svg",
      width: 27,
      height: 27,
    ),
  ),
)

（这种情况下可以去掉外层的Align，直接用Positioned的参数控制位置）

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