double.infinity 到底有啥用?

做 Android 的朋友都知道,在 Android 中,限定子元素大小的方法有三种,分别是 match_parentwrap_contentfixed size。如果使用 ConstraintLayout,还会有 match_constraint

这些值被设置到子元素的 layout_width 和 layout_height,由父元素解析生成 LayoutParams 设置给子元素,并在父元素的 measure 过程中使用它们以及父元素得到的 measureSpec 来确定子元素的大小。虽然子元素的大小最终由父元素决定,但父元素几乎不会违背子元素对自身大小的期望。因此你可以认为在 Android 中子元素的大小可以由子元素自己决定。子元素想要什么大小,给自身的 layout_width 和 layout_height 指定不同的值即可。

而在 Flutter 中,就完全不一样了。Flutter 积极组合的设计,希望一切布局都尽量通过组合的方式来实现。组合优于继承这是真理,但 Flutter 却走向了极端。连指定子元素的大小、padding、margin、translate、background 等等都需要通过嵌套来实现,这就是导致嵌套地狱的根源。

以指定子元素的大小为例,你需要给子元素套一层 SizedBox,通过它来限定子元素的大小。基于此,你可以理解为在一般情况下,Flutter 中子元素的大小无法由子元素自己决定,始终由其父元素决定,这和 Android 有本质的区别。

Flutter 也没有提供 match_parent 来让子元素撑满父元素,wrap_content 来让子元素内容有多大就撑多大。但是它提供了 double.infinity。我们一般使用它来让子元素撑满父元素。但其实 double.infinity 也用来表示 wrap_content。这得从 Flutter 的布局过程说起。

Flutter 布局过程

Flutter 的布局过程总结起来就三句话:

  1. 父元素向子元素传递约束(BoxConstraint)
  2. 子元素根据父元素传递来的约束以及自身的内容属性测量自身,并向父元素反馈自身大小(Size)
  3. 父元素根据子元素的大小以及自身的布局属性决定自身的大小以及子元素的 offset

这里有一个很重要的点是,子元素的大小永远不能违背父元素的约束,否则就会抛异常。子元素为自身的 size 赋值时,会触发以下检测:

if (!constraints.isSatisfiedBy(_size!)) {
  throw FlutterError.fromParts(<DiagnosticsNode>[
    ErrorSummary('$runtimeType does not meet its constraints.'),
    DiagnosticsProperty<BoxConstraints>('Constraints', constraints, style: DiagnosticsTreeStyle.errorProperty),
    DiagnosticsProperty<Size>('Size', _size, style: DiagnosticsTreeStyle.errorProperty),
    ErrorHint(
      'If you are not writing your own RenderBox subclass, then this is not '
      'your fault. Contact support: https://github.com/flutter/flutter/issues/new?template=2_bug.md',
    ),
  ]);
}

为了避免这个异常,子元素在设置自身 size 之前,会先尝试满足父元素的约束:

double contentWidth;

// calculate content width

double realWidth = constraints.constrainWidth(contentWidth);

这样就能保证设置的 size 永远满足父元素的约束,不引发异常。

当你使用 double.infinity 尝试撑满父元素时,这里的 contentWidth 值为 double.infinity,但 constraints.constrainWidth 会返回父元素的宽度,这就起到了 match_parent 的作用。这里的隐含意思是子元素的大小不可能真的为无限大,因为没有任何一个 UI 框架能渲染无限大的东西,因为那意味着无限大的资源消耗。

wrap_content 又是咋回事呢?其实也是同样的道理。

当父元素对子元素没有大小要求时,会向子元素传递宽松约束,即只限制最大的大小,一般为父元素的大小。意思是子元素想要多大就给多大,但不能超过自身大小。但有些 Widget 就没有这个限制,它们允许子元素的大小超过自己的大小,因此它们给子元素传递的最大大小为 double.infinity。但子元素测量自己时,发现父元素给的最大大小为 double.infinity,不可能真的将自身大小设置为 double.infinity,因为 Flutter 没法渲染无限大的东西。如果你尝试着这么做,同样会抛异常。所以一般情况下,子元素会直接将 double.infinity 当作 wrap_content 处理,向父元素反馈自己的内容大小。

所以总结下来就是:

  1. 自下而上的 double.infinity 代表 match_parent
  2. 自上而下的 double.infinity 代表 wrap_content

当然一切的原因都在于 Flutter 设计之初没有考虑像 Android 那样用 -1 来表示 match_parent,-2 来表示 wrap_content。如果这么做的话,就没有 double.infinity 什么事了。

多数时候你都可以使用 double.infinity 来达到 match_parent 的效果,但也不总是这样。你永远如法用它来自下而上的达到 wrap_content 的效果。因为它只能自上而下。真想让子元素自身大小为 wrap_content,那就结合支持 wrap_content 的 Widget 比如 Center 使用吧。或者使用 Flutter ConstraintLayout。它自带了 matchParentwrapContentfixedSizematchConstraint 的支持。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容