敞开成长之旅！这是我参加「日新方案 12 月更文应战」的第21天，点击查看活动概况

本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在解说widget 的 用法,参数以及扩展.
适宜人群: 入门

引言

AspectRatio 能够依据具体的长宽比束缚 child 的布局规模, 从而影响 child 的大小. 通常在视频、图像中会常常使用, 今天咱们来分析一下它的实现原理.

AspectRatio

AspectRatio 的参数只有 key、aspectRatio、child. 它会依据 aspectRatio 去重核算束缚 child 的布局规模.

Flutter 组件分析之AspectRatio
咱们举一个比如:

    Center(
      child: AspectRatio(
        aspectRatio: 1.0,
        child: Image.network('xx'),
      ),
    )

以图片长宽比3:2为比如

  • 当 aspectRatio 为1.0时:
    由于图片的份额大于 1.0, aspectRatio 取 1.0 时, 以屏宽为基准, 1:1为份额, 构建了一个正方形的布局束缚规模. 当图片比大于 1.0 时, 图片以屏宽为图片宽, 而图片高要小于束缚高. 因而实践布局中, 图片在束缚中心.

    Flutter 组件分析之AspectRatio

  • 当 aspectRatio 为0.2时:
    由于图片的份额大于 1.0, aspectRatio 取 0.2 时, 屏幕宽高大于0.2. 以屏高为基准, 1:5为份额, 构建了一个矩形的布局束缚规模. 当图片比大于 1.0 时, 图片以屏幕高的1/5为图片宽. 因而实践布局中, 图片会比正常小.

    Flutter 组件分析之AspectRatio

  • 当 aspectRatio 为5.0时:
    由于图片的份额大于 1.0, aspectRatio 取 5.0 时, 屏幕宽高小于5.0. 以屏宽为基准, 5:1为份额, 构建了一个矩形的布局束缚规模. 当图片比大于 1.0 时, 图片以屏幕高为图片的高. 因而实践布局中, 图片会比正常小.

    Flutter 组件分析之AspectRatio

这一系列的原因都来自于内部的算法, 让咱们一起进入源码中学习一下~

RenderAspectRatio

RenderAspectRatio 是 AspectRatio 的 RenderObject . 里边也封装了关于布局的核算规则, AspectRatio 的核算核心在于 _applyAspectRatio.

constraints.isTight

假如尺度刚刚好合适的话, 会返回满足束缚的最小大小

Flutter 组件分析之AspectRatio

非constraints.isTight

这种情况下, width 会具有默认赋值. 首先会等于束缚的最大宽度. 假如宽度是有限的, 那么高度会依据 _aspectRatio 赋值. 反之, 高度会取束缚限制的最大高, 同时将宽依据高度重赋值.在赋值完基础度宽高后, 会经过四个判别获取最后的尺度.

Flutter 组件分析之AspectRatio

四个判别如下:

  • width > constraints.maxWidth
    当宽度大于束缚最大宽时, 会从头把宽赋值为束缚的最大宽, 偏重核算高
  • height > constraints.maxHeight
    当高度大于束缚最大高时, 会从头把高赋值为束缚的最大高, 偏重核算宽
  • width < constraints.minWidth
    当宽小于束缚的最小值时, 会把宽赋值为束缚度最小值, 偏重核算高
  • height < constraints.minHeight
    当高小于束缚的最小值时, 会把高赋值为束缚度最小值, 偏重核算宽

Flutter 组件分析之AspectRatio

在经过这一系列核算后, 宽高将会依据 aspectRatio 重核算直至符合 aspectRatio 并且能放进束缚中.

结语

这里是WeninerIo
假如你对这次的技术共享感兴趣或者有什么疑问
不妨在评论区留言或私信
或许这次的共享不是你所等待的
那就点个关注吧! ❤️
下次也许就是你想看的呢?