Flutter Spacer引发的The ParentDataWidget Expanded(flex: 1) 惨案

问题描述

在flutter控制台中遇到如下报错:

bash 复制代码
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 StackParentData.

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 Stack widget.

The ownership chain for the RenderObject that received the incompatible parent data was:
  SizedBox.shrink ← Expanded ← Spacer ← Stack ← ConstrainedBox ← Padding ← Container ← Listener ← _GestureSemantics ← RawGestureDetector ← ⋯

问题分析

网上千篇一律的错误信息,都说是Expanded和Stack的关系问题。

但是排查代码中却没有任何地方使用到Expanded,而且由于报错没有指出在哪个页面,所以,问题一时间僵住了。

最后,通过一个一个注释代码块,确定问题大致代码块,最后按照SizedBox.shrink ← Expanded ← Spacer ← Stack ← ConstrainedBox ← Padding ← Container ← Listener ← _GestureSemantics ← RawGestureDetector ← ⋯顺序

一个一个在页面中排查,排查到Spacer,点击进去查看实现,Spacer的会当场build一个Expanded。

Spacer的源码如下:

dart 复制代码
class Spacer extends StatelessWidget {
  /// Creates a flexible space to insert into a [Flexible] widget.
  ///
  /// The [flex] parameter may not be null or less than one.
  const Spacer({super.key, this.flex = 1})
    : assert(flex > 0);

  /// The flex factor to use in determining how much space to take up.
  ///
  /// The amount of space the [Spacer] can occupy in the main axis is determined
  /// by dividing the free space proportionately, after placing the inflexible
  /// children, according to the flex factors of the flexible children.
  ///
  /// Defaults to one.
  final int flex;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: flex,
      child: const SizedBox.shrink(),
    );
  }
}

可以看到Spacer的build方法中,直接返回了一个Expanded,而Expanded的child是SizedBox.shrink()。这就是问题的根源。

解决方案

找到问题所在的页面,将Expanded和Spacer的关系注释掉,或者将Expanded的child改为Container,或者将Expanded的child改为Container()。

总结

不仅 Expanded 的使用限制在Flex/Row/Column中,Spacer 也有一样的限制。

相关推荐
zhanshuo30 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang31 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil33 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录40 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672240 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少1 小时前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale033 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
九丝城主3 小时前
2025使用VM虚拟机安装配置Macos苹果系统下Flutter开发环境保姆级教程--上篇
服务器·flutter·macos·vmware