脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → Android → Android Flutter Transform

一文带你了解Android Flutter中Transform的使用

 更新时间：2023年01月31日 10:54:58   作者：程序那些事  
flutter的强大之处在于，可以对所有的widget进行Transform，因此可以做出非常酷炫的效果。本文就来大家了解一下Transform的具体使用，感兴趣的可以了解一下

简介

虽然我们在开发APP的过程中是以功能为主，但是有时候为了美观或者其他的特殊的需求，需要对组件进行一些变换。在Flutter中这种变换就叫做Transform。

flutter的强大之处在于，可以对所有的widget进行Transform，因此可以做出非常酷炫的效果。

Transform简介

在Flutter中，Transform本身也是一个Widget，它主要是把变换作用在它的子widget上。我们先来看下Transform的定义和构造函数：

class Transform extends SingleChildRenderObjectWidget

  const Transform({
    Key? key,
    required this.transform,
    this.origin,
    this.alignment,
    this.transformHitTests = true,
    this.filterQuality,
    Widget? child,
  }) : assert(transform != null),
       super(key: key, child: child);

可以看到Transform需要transform，origin,alignment,transformHitTests和filterQuality这几个属性。

其中transform是一个Matrix4对象，它是一个4维的矩阵，用来描述child应该怎么被transform。

origin是一个Offset对象，表示的是原始坐标系的值，默认是左上角。origin和transform是有关联关系的，我们可以通过修改origin来达到不同的transform的效果。

alignment是origin的对其方式，是一个AlignmentGeometry对象。

filterQuality是在进行图像变换的过程中，图像的取样质量。

除了上面这个默认的构造函数之外，为了简单起见Transform还提供了几个有特殊作用的构造函数：

  Transform.rotate({
    Key? key,
    required double angle,
    this.origin,
    this.alignment = Alignment.center,
    this.transformHitTests = true,
    this.filterQuality,
    Widget? child,
  }) : transform = Matrix4.rotationZ(angle),
       super(key: key, child: child);

Transform.rotate就是对子child进行旋转变换。

通过传入angle属性，实现子child沿Z轴旋转。

  Transform.translate({
    Key? key,
    required Offset offset,
    this.transformHitTests = true,
    this.filterQuality,
    Widget? child,
  }) : transform = Matrix4.translationValues(offset.dx, offset.dy, 0.0),
       origin = null,
       alignment = null,
       super(key: key, child: child);

Transform.translate是通过改变offset的值来修改原始坐标系的位置。

  Transform.scale({
    Key? key,
    required double scale,
    this.origin,
    this.alignment = Alignment.center,
    this.transformHitTests = true,
    this.filterQuality,
    Widget? child,
  }) : transform = Matrix4.diagonal3Values(scale, scale, 1.0),
       super(key: key, child: child);

Transform.scale通过传入scale，来对子child进行放大缩小。

从上面的不同构造函数可以看出来，实际上最终都将传入的参数转换成为Matrix4的transform对象。

如果你对Matrix4熟悉的话，那么可以用最直接的构造函数，直接传入Matrix4。

Transform的使用

上面我们介绍了Transform.rotate，Transform.translate和Transform.scale这几个构造函数，接下来我们将会使用具体的例子来进行详细的讲解。

首先是Transform.rotate，用来对子组件进行旋转，下面是一个使用的例子：

  Widget build(BuildContext context) {
    return Center(
      child: Transform.rotate(
        angle: pi/4,
        child: const Icon(
            Icons.airplanemode_active,
            size: 200,
          color: Colors.blue,
        ),
      ));
  }

上面的例子将一个飞机的Icon旋转pi/4,也就是45度，最后生成的界面如下：

接下来是Transform.translate，这个方法主要是对子组件进行坐标轴变换，需要传入一个offset选项，如下所示：

    return Transform.translate(
          offset:const Offset(50.0, 100.0),
          child: const Icon(
            Icons.airplanemode_active,
            size: 200,
            color: Colors.blue,
          ),
        );

上面我们还是使用了飞机的图标，不过对他进行了坐标轴变换，最后得出的界面如下：

最后我们要展示的是Transform.scale，用来对子组件进行缩放。

上面我们的图标size是200，我们可以将其缩放为50%，如下所示：

    return Transform.scale(
      scale: 0.5,
      child: const Icon(
        Icons.airplanemode_active,
        size: 200,
        color: Colors.blue,
      ),
    );

运行我们可以得到下面的界面：

是不是变小了很多？

总结

Transform是一个功能强大的widget，通过Transform我们可以做出很多非常有趣的效果。

以上就是一文带你了解Android Flutter中Transform的使用的详细内容，更多关于Android Flutter Transform的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • Eclipse新建Android项目报错解决方案详细汇总

    Eclipse新建Android项目报错解决方案详细汇总

    这篇文章主要介绍了Eclipse新建Android项目报错解决方案详细汇总，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • Android Uri和文件路径互相转换的实例代码

    Android Uri和文件路径互相转换的实例代码

    在项目中需要用到将Uri转换为绝对路径，下面小编把Android Uri和文件路径互相转换的实例代码分享到脚本之家平台，需要的的朋友参考下吧
    2017-07-07
  • Android打开GPS导航并获取位置信息返回null解决方案

    Android打开GPS导航并获取位置信息返回null解决方案

    最近在做一个 Android 项目，需要用到GPS获取位置信息，从 API 查了一下，发现获取位置信息仅需极其简单的一句即可getLastKnownLocation(LocationManager.GPS_PROVIDER)郁闷的是一直为null，于是搜集整理下，晒出来与大家分享
    2013-01-01
  • Android 配置gradle实现VersionCode自增实例

    Android 配置gradle实现VersionCode自增实例

    今天小编就为大家分享一篇Android 配置gradle实现VersionCode自增实例，具有很好的 参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-03-03
  • Android开发实现TextView显示丰富的文本

    Android开发实现TextView显示丰富的文本

    这篇文章主要介绍了Android开发实现TextView显示丰富的文本,涉及Android中TextView的使用技巧,需要的朋友可以参考下
    2015-12-12
  • android studio 的下拉菜单Spinner使用详解

    android studio 的下拉菜单Spinner使用详解

    这篇文章主要介绍了android studio 的下拉菜单Spinner使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Android 图片存储到指定路径和相册的方法

    Android 图片存储到指定路径和相册的方法

    本篇文章主要介绍了Android 图片存储到指定路径和相册的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Android入门之在Activity之间穿梭的Intent

    Android入门之在Activity之间穿梭的Intent

    Intent可以用来启动Activity(startActivity(Intent))、Serveice（startService（Intent））等组件，可以用来绑定Activity和Service以建立它们之间的通信(bindServiceConnaction（Intent，ServiceConnection，int）)，可以作为Broadcast Intent发送给广播接收器
    2021-10-10
  • 如何通过Android Stduio来编写一个完整的天气预报APP

    如何通过Android Stduio来编写一个完整的天气预报APP

    这篇文章主要介绍了通过Android Stduio来编写一个天气预报APP，具体的实现是通过调用天气预报接口来获得天气数据，再将查询的天气信息存储在SQLiteDatabase中，界面则用LIstView和GridView来搭建
    2021-08-08
  • android使用Ultra-PullToRefresh实现下拉刷新自定义代码

    android使用Ultra-PullToRefresh实现下拉刷新自定义代码

    本篇文章主要介绍了android使用Ultra-PullToRefresh实现下拉刷新新自定义，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-02-02

最新评论