【绘制 widget】Flutter Transform-阿里云开发者社区

【绘制 widget】Flutter Transform

2022-12-27 147

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【绘制 widget】Flutter Transform

绘制 child 之前 Transform 会对 child 进行平移，旋转缩放等变换。Transform 不会对 size 造成影响。

Transform 介绍

Transform 继承自 SingleChildRenderObjectWidget，RenderTransform 继承自 RenderProxyBox，所以 Transform 也能算作是布局 widget ，但是他并没有 override PerformLayout，对布局方面没有什么建树，完全继承父类的行为，有 child 的时候 size 和 child 一样大。源码方面就是用 canvas 画出来，对于 Transform 最重要的就是如何使用，理解每个参数的作用。

const Transform({
    super.key,
    required this.transform,
    this.origin,
    this.alignment,
    this.transformHitTests = true,
    this.filterQuality,
    super.child,
 })
复制代码

我们看下这些参数都如何用。

Matrix4 变换 transform

transform 是一个 Matrix4，可以直接使用它来控制如何变换，只是有些复杂。

Matrix4 平移

atrix4.translationValues(offset.dx, offset.dy, 0.0)
复制代码

Matrix4 缩放

Matrix4.diagonal3Values(scaleX, scaleY, 1)
复制代码

Matrix4 旋转

static Matrix4 _createZRotation(double sin, double cos) {
    final Matrix4 result = Matrix4.zero();
    result.storage[0] = cos;
    result.storage[1] = sin;
    result.storage[4] = -sin;
    result.storage[5] = cos;
    result.storage[10] = 1.0;
    result.storage[15] = 1.0;
    return result;
  }
 static Matrix4 _computeRotation(double radians) {
    assert(radians.isFinite, 'Cannot compute the rotation matrix for a non-finite angle: $radians');
    if (radians == 0.0) {
      return Matrix4.identity();
    }
    final double sin = math.sin(radians);
    if (sin == 1.0) {
      return _createZRotation(1.0, 0.0);
    }
    if (sin == -1.0) {
      return _createZRotation(-1.0, 0.0);
    }
    final double cos = math.cos(radians);
    if (cos == -1.0) {
      return _createZRotation(0.0, -1.0);
    }
    return _createZRotation(sin, cos);
  }
  transform = _computeRotation(angle);
复制代码

直接使用还是很麻烦的，所以我们一般用命名构造函数，就不用关心 Matrix4 了，直接用相关参数即可。

Transform.translate(
    offset: const Offset(0.0, 15.0),
    child: Container(
      padding: const EdgeInsets.all(8.0),
      color: const Color(0xFF7F7F7F),
      child: const Text('Quarter'),
    ),
  )
复制代码

Transform.scale(
   scale: 0.5,
   child: Container(
     padding: const EdgeInsets.all(8.0),
     color: const Color(0xFFE8581C),
     child: const Text('Bad Idea Bears'),
   ),
 )
复制代码

Transform.rotate(
   angle: -pi / 12.0,
   child: Container(
     padding: const EdgeInsets.all(8.0),
     color: const Color(0xFFE8581C),
     child: const Text('Apartment for rent!'),
   ),
 )
复制代码

需要注意的是 angle 是一个弧度，一周是 2pi。用 pi 需要 import 'dart:math';

如果要扭曲还是得直接用 Matrix4.skewX， Matrix4.skewY, Matrix4.skew

Transform origin

origin 是应用变换的原点。默认情况下 scale，roate 的变换原点是 center（ alignment 默认是 center )。origin是一个offset。 dx 为正表示原点向左偏移，为负向右偏移；dy 为正向上偏移，为负向下偏移。

Container(
  decoration: BoxDecoration(border: Border.all(color: Colors.red)),
  child: Transform.scale(
     origin: Offset(50,50),
    scale: 2,
    child: Container(
      width: 100,
      height: 100,
      color: Color.fromRGBO(0, 0, 200, .2),
    ),
  ))
复制代码

origin: Offset(-50,-50),
复制代码

摆放 child

alignment 和 origin 的效果是一样的，都是平移 child，他们可以同时存在，效果叠加。

比如上面的例子。把默认的 alignment:Alignment.center 改为 alignment:Alignment.topLeft。

Transform.scale(
          alignment:Alignment.topLeft ,
          origin: Offset(0,0),
复制代码

Transform.scale(
          alignment:Alignment.topLeft ,
          origin: Offset(50,50),
复制代码

transformHitTests

transformHitTests 默认为true，点击的 local 位置是相对于变换后的 child，否则是相对于变换前的 child。