使用 AspectRatio Widget

简介: 使用 AspectRatio Widget

image.png


AspectRatio widget 是用来约束宽高比例的,如果你需要 widget 必须要有一定的宽高比,这个组件就很有用。

但 AspectRatio 并不总是如你所愿,我一度想直接设置宽高达到同样的目的,但当你了解了它的逻辑之后,发现这样做并不明智,因为即使是直接设置高度,这些逻辑也是少不了的。

AspectRatio 需要父容器至少 width 或 height 是有边界的。

想想也是合理的。如果约束是没有边界的,而 AspectRatio 本身又没有宽高属性,AspectRatio 就无法设置宽高,只能都是无限,就和宽高有比例这个要求相矛盾。

AspectRatio 的尺寸的计算逻辑

  1. 如果父元素的宽高都没有边界,抛异常。
  2. 如果收到的是 tight 约束,那么相当于 AspectRatio 无效,不会起到任何作用,只会透传约束。
  3. 优先以宽度为准,按比例设置高度。如果宽度无限,以高度为准按比例设置宽度。
  4. 无论是高度还是宽度都必须在约束的范围内。

AspectRatio 的代码逻辑

决定宽高的代码

Size _applyAspectRatio(BoxConstraints constraints) {
    assert(constraints.debugAssertIsValid());
    assert(() {
      if (!constraints.hasBoundedWidth && !constraints.hasBoundedHeight) {
        throw FlutterError(
          '$runtimeType has unbounded constraints.\n'
          'This $runtimeType was given an aspect ratio of $aspectRatio but was given '
          'both unbounded width and unbounded height constraints. Because both '
          "constraints were unbounded, this render object doesn't know how much "
          'size to consume.',
        );
      }
      return true;
    }());
    if (constraints.isTight) {
      return constraints.smallest;
    }
    double width = constraints.maxWidth;
    double height;
    // We default to picking the height based on the width, but if the width
    // would be infinite, that's not sensible so we try to infer the height
    // from the width.
    if (width.isFinite) {
      height = width / _aspectRatio;
    } else {
      height = constraints.maxHeight;
      width = height * _aspectRatio;
    }
    // Similar to RenderImage, we iteratively attempt to fit within the given
    // constraints while maintaining the given aspect ratio. The order of
    // applying the constraints is also biased towards inferring the height
    // from the width.
    if (width > constraints.maxWidth) {
      width = constraints.maxWidth;
      height = width / _aspectRatio;
    }
    if (height > constraints.maxHeight) {
      height = constraints.maxHeight;
      width = height * _aspectRatio;
    }
    if (width < constraints.minWidth) {
      width = constraints.minWidth;
      height = width / _aspectRatio;
    }
    if (height < constraints.minHeight) {
      height = constraints.minHeight;
      width = height * _aspectRatio;
    }
    return constraints.constrain(Size(width, height));
  }
复制代码

定好自己的宽高后,把 child 设置成和自己一样宽高

@override
  void performLayout() {
    size = computeDryLayout(constraints);
    if (child != null) {
      child!.layout(BoxConstraints.tight(size));
    }
  }
复制代码

AspectRatio 的 renderObject 继承自 RenderProxyBox。只可以有一个child,没有 alignment 属性,不能摆放 child的位置。

AspectRatio 的 aspectRatio 参数要求是 大于0 的 double ,但是一般都是用分数的形式来写,这样可读性会更好些。

AspectRatio(
      aspectRatio: 1 / 2,
);


目录
相关文章
|
存储 自然语言处理 Oracle
打造全球化企业:ERP系统的国际化与多语言支持
打造全球化企业:ERP系统的国际化与多语言支持
852 2
|
Shell 容器 Perl
Back-off restarting failed container 问题解决
Back-off restarting failed container 问题解决
2703 0
|
Shell 网络安全 开发工具
Qt实用技巧:QtCreator使用git(gitHub)管理项目代码笔记
Qt实用技巧:QtCreator使用git(gitHub)管理项目代码笔记
Qt实用技巧:QtCreator使用git(gitHub)管理项目代码笔记
|
API 开发工具 开发者
开发者必备:10个提升工作效率的网站🚀
作为一名开发者,利用合适的工具可以显著提高工作效率。以下是我个人推荐的10个网站,能够帮助你节省时间并提升开发质量。
199 2
开发者必备:10个提升工作效率的网站🚀
|
11月前
|
存储 SQL Apache
Apache Doris 开源最顶级基于MPP架构的高性能实时分析数据库
Apache Doris 是一个基于 MPP 架构的高性能实时分析数据库,以其极高的速度和易用性著称。它支持高并发点查询和复杂分析场景,适用于报表分析、即席查询、数据仓库和数据湖查询加速等。最新发布的 2.0.2 版本在性能、稳定性和多租户支持方面有显著提升。社区活跃,已广泛应用于电商、广告、用户行为分析等领域。
Apache Doris 开源最顶级基于MPP架构的高性能实时分析数据库
|
API Java 数据库连接
从平凡到卓越:Hibernate Criteria API 让你的数据库查询瞬间高大上,彻底告别复杂SQL!
【8月更文挑战第31天】构建复杂查询是数据库应用开发中的常见需求。Hibernate 的 Criteria API 以其强大和灵活的特点,允许开发者以面向对象的方式构建查询逻辑,同时具备 SQL 的表达力。本文将介绍 Criteria API 的基本用法并通过示例展示其实际应用。此 API 通过 API 构建查询条件而非直接编写查询语句,提高了代码的可读性和安全性。无论是简单的条件过滤还是复杂的分页和连接查询,Criteria API 均能胜任,有助于提升开发效率和应用的健壮性。
412 0
|
SQL 存储 小程序
数据库数据恢复—Sql Server数据库文件丢失的数据恢复案例
数据库数据恢复环境: 5块硬盘组建一组RAID5阵列,划分LUN供windows系统服务器使用。windows系统服务器内运行了Sql Server数据库,存储空间在操作系统层面划分了三个逻辑分区。 数据库故障: 数据库文件丢失,主要涉及3个数据库,数千张表。数据库文件丢失原因未知,不能确定丢失的数据库文件的存放位置。数据库文件丢失后,服务器仍处于开机状态,所幸未写入大量数据。
数据库数据恢复—Sql Server数据库文件丢失的数据恢复案例
|
负载均衡 网络协议 算法
【springcloud】Ribbon详解
Spring Cloud Ribbon是一个基于HTTP和TCP的客户端负载均衡工具,它基于Netflix Ribbon实现。简单点说,其主要功能是提供客户端的软件负载均衡算法和服务调用。Ribbon客户端组件提供一系列完善的配置项如连接超时,重试等。简单的说,就是在配置文件中列出Load Balancer(简称LB)后面所有的机器,Ribbon会自动的帮助你基于某种规则(如简单轮询,随机连接,权重等)去连接这些机器。
489 0
|
存储 人工智能 安全
保障隐私的Elasticsearch AI搜索解决方案
【8月更文第28天】随着大数据和人工智能技术的发展,搜索引擎在日常生活中扮演着越来越重要的角色。然而,用户隐私保护成为了一个不容忽视的问题。本文将探讨如何在确保用户数据隐私的同时,利用Elasticsearch实现智能搜索功能。我们将介绍一种综合方案,该方案结合了加密技术、差分隐私、匿名化处理以及安全多方计算等方法,以保障用户数据的安全性
827 0
|
关系型数据库 分布式数据库 PolarDB
【PolarDB开源】PolarDB开源之旅:从零开始搭建分布式数据库集群
【5月更文挑战第20天】PolarDB,阿里云自研的云原生分布式数据库,因其高性能、高可用和易用性备受瞩目。本文指导如何搭建PolarDB集群:准备硬件和软件环境,从GitHub克隆源码,构建Docker镜像,部署控制节点和计算节点,最后验证集群状态。通过开源,PolarDB旨在推动数据库技术进步,邀请用户一同探索其潜力,共创未来。
577 4