如何在简单Flutter代码中修复Incorrect use of ParentDataWidget错误

Widget库捕获到的异常：

Incorrect use of ParentDataWidget.

错误原因 #

• 该报错的核心触发规则是：Expanded、Flexible、Positioned这类携带ParentData配置的Widget，只能放在特定父容器中使用：Expanded/Flexible的父组件必须是Row、Column或Flex；Positioned的父组件必须是Stack，不符合该约束就会抛出此异常。
• 你提供的页面代码中，Column下嵌套Expanded包裹GridView的写法是符合规则的，问题出在你作为GridView子项的自定义cookbook_item组件内部，大概率嵌套了Expanded/Flexible组件，而GridView的子项父容器不属于Row/Column/Flex类，违反了ParentDataWidget的使用限制。

修复方案 #

• 第一步：打开lib/widget/cookbook_item.dart文件，移除组件根节点或内部非Row/Column子节点下的Expanded/Flexible包裹。
• 第二步：如果需要让cookbook_item的内容自适应填充GridView分配的子项空间，可以用Container搭配width: double.infinity、height: double.infinity实现，或者使用FittedBox做内容缩放适配，不要使用Flex类的占空间组件。

错误代码示例（cookbook_item内部） #

@override
Widget build(BuildContext context) {
  // 错误：Expanded的父组件不是Row/Column/Flex
  return Expanded(
    child: Card(
      child: Column(
        children: [
          Image.network(imageURLCookbook),
          Text(cookbookName),
        ],
      ),
    ),
  );
}

修复后代码示例 #

@override
Widget build(BuildContext context) {
  // 直接用Container填充父容器分配的空间即可
  return Container(
    width: double.infinity,
    height: double.infinity,
    child: Card(
      child: Column(
        children: [
          Expanded( // 这里的Expanded父组件是Column，符合规则，可以保留
            child: Image.network(imageURLCookbook, fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.all(8),
            child: Text(cookbookName),
          ),
        ],
      ),
    ),
  );
}

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