专栏首页子曰五溪Flex 源码解读

Flex 源码解读

你能通过源码看见 Row 和 Column 都继承了 Flex ,布局具体的计算都在这个类中,我们可以通过源码 github.com/flutter/flut 了解一下 Flex 是如何计算布局的。

Flex 构造函数

Flex({
 Key key,
 @required this.direction,
 this.mainAxisAlignment = MainAxisAlignment.start,
 this.mainAxisSize = MainAxisSize.max,
 this.crossAxisAlignment = CrossAxisAlignment.center,
 this.textDirection,
 this.verticalDirection = VerticalDirection.down,
 this.textBaseline,
 List<Widget> children = const <Widget>[],
})

基本上默认值的设计不管是 Row 还是 Column 都遵循了 Flex 的设计,唯一相比之下只有 this.direction 参数是多余出来的一个,通过源码的注释我们可以了解到它是用于设置轴的排列方向。

我们通过 RenderFlex 可以找到 github.com/flutter/flut performLayout ,基本上我们都能猜测到一开始肯定会遍历 child,我把一些无用的代码折叠了:

通过逻辑可以分析出通过_getFlex计算出flex的值,flex 值存在然后去找到最后一个存在 flex 值的 child,对于不包含 flex 值的 child 则设置它们的对齐方向。

接下来从 final double freeSpace = math.max(0.0, (canFlex ? maxMainSize : 0.0) - allocatedSize); 开始去计算包含 flex 的空间大小,然后根据 CrossAxisAlignment.baseline 对 child 进行调整,这一步结束之后开始按照主轴对齐的方式将 child 进行调整。

最后一步按照交叉轴进行设置调整 child 。

本文分享自微信公众号 - 子曰五溪(fed-talk)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 技术 | 玩玩rollup与flow,感受一下“大自然”的魅力

    最近撸了两个项目,全程用了rollup,flow,谈一下自己的感受,极力的推荐大家尝试。说起来,用它们还是从Vue换构建工具加入flow开始,就一直想大规模的应...

    icepy
  • 戏说Side Project

    当然了,最近我的目光转向了区块链,花了一些小小时间做了一个Side Project,https://icepy.me/blockchain-navigate/,...

    icepy
  • Go JSON

    如今在网络编程中JSON这种数据格式占据了较大的市场,如果不出意外,几乎新开发的数据交互,都会使用JSON这种轻量级的数据格式来处理数据交互。所以,怎么解析,转...

    icepy
  • CCNP知识点总结——IPv6

    2的128次方:340,282,366,920,938,463,374,607,432,768,211,456。

    魏晓蕾
  • UWP 扩展/自定义标题栏的方法,一些概念和一些注意事项

    发布于 2018-07-27 06:17 更新于 2018-07...

    walterlv
  • asp.net core 发布到docker 极简步骤

    2.把发布成功的文件通过scp等工具发布到linux服务器上,在当前目录下新建一个dockerfile

    kklldog
  • React Native 文档查看组件

    GitHub - forrest23/ReactNativeComponents: React Native组件大全

    forrest23
  • UI5应用如果出现白屏但是没有任何错误消息打印出来,应该如何处理

    You meet with this error popup dialog in UI, however there is no error hint foun...

    Jerry Wang
  • DDD(领域驱动设计)的这些问题,你都知道吗?

    本文中的问题精选自上期【你问我答】——DDD(领域驱动设计)专题中读者的提问。【你问我答】是由美团点评技术团队推出的线上问答服务,你在工作学习中遇到的各种技术问...

    美团技术团队
  • 后台管理系统中英文版本切换

    2:现在要修改一下管理后台的标题 首先,在login_en.properties文件里写上英文标题

    祈澈菇凉

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动