Flutter中Expanded使用报错排查及ownership chain含义解析

你的代码 #

Expanded(
        child: Wrap(
          alignment: WrapAlignment.spaceAround,
          children: <Widget>[
            Expanded(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                verticalDirection: VerticalDirection.down,
                children: <Widget>[
                  Text(
                      "${Constants.ASSIGNMENT_PREFIX} ${assignment?.id}",
                      style: Theme.of(context)
                          .textTheme
                          .headline6),
                  _getAssignState(
                      assignment?.status),
                ],
              ),
            ),
          ],
        ),
      )

完整错误信息 #

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

The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type WrapParentData.

Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a Wrap widget.

The ownership chain for the RenderObject that received the incompatible parent data was:
  Row ← Expanded ← Wrap ← Expanded ← Row ← Padding ← Padding ← DecoratedBox ← Container ← Listener ← ⋯
When the exception was thrown, this was the stack:
#0      RenderObjectElement._updateParentData.<anonymous closure> (package:flutter/src/widgets/framework.dart:5723:11)
#1      RenderObjectElement._updateParentData (package:flutter/src/widgets/framework.dart:5739:6)
#2      RenderObjectElement.attachRenderObject (package:flutter/src/widgets/framework.dart:5761:7)
#3      RenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5440:5)
#4      MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6228:11)
...
====================================================================================================
Reloaded 1 of 2005 libraries in 1,286ms.

错误原因 #

你把Expanded直接嵌套在了Wrap组件内部，这是完全错误的用法。Expanded是专门为Flex类组件（Row、Column这类）设计的，它的作用是让子组件占据Flex容器的剩余空间，会给子组件添加FlexParentData类型的父数据。但Wrap组件的子组件只能接收WrapParentData类型的父数据，两种数据类型不兼容，因此触发了这个错误。

具体来说，就是代码里内层的那个Expanded，它是Wrap的直接子组件，这就是问题的根源。

修复方案 #

直接删掉内层的Expanded即可，Wrap不需要用Expanded来控制子组件的空间分配：

Expanded(
  child: Wrap(
    alignment: WrapAlignment.spaceAround,
    children: <Widget>[
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        verticalDirection: VerticalDirection.down,
        children: <Widget>[
          Text(
              "${Constants.ASSIGNMENT_PREFIX} ${assignment?.id}",
              style: Theme.of(context).textTheme.headline6),
          _getAssignState(assignment?.status),
        ],
      ),
    ],
  ),
)

如果你的需求是让Row在Wrap里占满可用宽度，可以用SizedBox(width: double.infinity)包裹Row，确保它横向撑满：

Expanded(
  child: Wrap(
    alignment: WrapAlignment.spaceAround,
    children: <Widget>[
      SizedBox(
        width: double.infinity,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            Text(
                "${Constants.ASSIGNMENT_PREFIX} ${assignment?.id}",
                style: Theme.of(context).textTheme.headline6),
            _getAssignState(assignment?.status),
          ],
        ),
      ),
    ],
  ),
)

「ownership chain」的含义 #

错误日志里的ownership chain指的是渲染对象的归属层级链，它展示了出问题的那个RenderObject（这里是Row对应的渲染对象）往上追溯的所有父级渲染对象的嵌套关系，箭头方向是「子组件 ← 父组件」。

比如日志里的这条链：

Row ← Expanded ← Wrap ← Expanded ← Row ← Padding ← Padding ← DecoratedBox ← Container ← Listener ← ⋯

意思是：Row的父组件是Expanded，这个Expanded的父组件是Wrap，再往上是另一个Expanded，依此类推。通过这个链条你能快速定位到那个放错位置的组件（就是作为Wrap直接子组件的Expanded），帮你理清错误发生的层级位置。

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