关于flutter:flutter系列之按比例缩放的AspectRatio和FractionallySizedBox

简介

咱们在构建UI的时候，为了适应不同的屏幕大小，通常须要进行一些自适应的配置，而最常见的自适应就是依据某个宽度或者高度主动进行组件的缩放。

明天要给大家介绍两个能够主动缩放的组件AspectRatio和FractionallySizedBox。

AspectRatio

AspectRatio的目标就是将其child按比例缩放。

先来看下AspectRatio的定义：

class AspectRatio extends SingleChildRenderObjectWidget

能够看到AspectRatio继承自SingleChildRenderObjectWidget，示意用来出现一个single child。

AspectRatio须要的属性有两个，别离是aspectRatio和子元素child。

aspectRatio是一个double类型的数据，为了不便起见，咱们个别应用比例的格局来进行示意，比方3.0/2.0等。

尽管咱们晓得3/2的后果是1.5，然而咱们最好不要自行计算结果，因为应用3.0/2.0更加直观。

AspectRatio的逻辑是首先取得最大的width或者height，而后依据width或者height来计算height和width。接下来咱们来看几个具体的例子，来具体理解AspectRatio。

首先是一个有限宽度然而高度为150的container，而后再container的child中应用了AspectRatio组件，如下所示：

  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      alignment: Alignment.center,
      width: double.infinity,
      height: 150.0,
      child: AspectRatio(
        aspectRatio: 3 / 2,
        child: Container(
          color: Colors.red,
        ),
      ),
    );

这里的aspectRatio=3/2, 那么怎么来计算aspectRatio的大小呢？

对于aspectRatio的父widget来说，他的宽度是有限的，他的高度是150，所以aspectRatio的高度是能够确定的，也就是150，咱们依据aspectRatio的比例，计算出它的width=150/2 * 3 = 225, 如下所示：

再看上面的一个例子:

  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      alignment: Alignment.center,
      width: 150.0,
      height: 150.0,
      child: AspectRatio(
        aspectRatio: 2.0,
        child: Container(
          color: Colors.red,
        ),
      ),
    );
  }

这个例子中Container的width和height是相等的。

在它的child中应用的aspectRatio=2.0。如果child的height抉择=150，那么对应的width就应该是300，很显著超出了Container的范畴，所以这里抉择的是width=150， 而对应的height=75， 入下图所示：

那么问题来了， 如果AspectRatio指定了大小应该怎么解决呢？

比方咱们给aspectRatio的child增加一个width和height限度：

  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      alignment: Alignment.center,
      width: 150.0,
      height: 150.0,
      child: AspectRatio(
        aspectRatio: 2.0,
        child: Container(
          color: Colors.red,
          width: 50,
          height: 50,
        ),
      ),
    );
  }

你会发现这个width和height对Container的大小是没有成果的。

这里就要谈到之前咱们提到的constraints了，对于AspectRatio来说，他心愿子child填充斥它的空间，所以child会继承这个constraints，从而展现雷同的界面。

FractionallySizedBox

FractionallySizedBox和AspectRatio有些相似，不过FractionallySizedBox是依照可用空间的大小来进行比例设置的。

首先来看下FractionallySizedBox的定义：

class FractionallySizedBox extends SingleChildRenderObjectWidget

能够看到FractionallySizedBox和AspectRatio一样继承自SingleChildRenderObjectWidget。

FractionallySizedBox有三个属性，别离是alignment,widthFactor和heightFactor。

其中alignment示意的是FractionallySizedBox中子child的排列形式。

而widthFactor和heightFactor是double类型的，示意的是对应的缩放比例。

接下来，咱们看一下FractionallySizedBox的具体应用。

  Widget build(BuildContext context) {

    return FractionallySizedBox(
      widthFactor: 1,
      heightFactor: 0.25,
      alignment: FractionalOffset.center,
      child: DecoratedBox(
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.red,
            width: 4,
          ),
        ),
      ),
    );
  }

这里咱们设置对应的widthFactor=1和heightFactor=0.25， 也就是说widht和可用空间的width是统一的，而height只有原来的1/4。

为了不便起见，咱们将child用一个DecoratedBox封装起来，用来展现box的边界，最初失去的界面如下所示：

总结

纯熟应用AspectRatio和FractionallySizedBox能够很不便的按比例来绘制界面的元素，十分好用。

本文的例子：https://github.com/ddean2009/learn-flutter.git

更多内容请参考 www.flydean.com

最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！

欢送关注我的公众号:「程序那些事」,懂技术，更懂你！