Flutter Transform 学习

Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效,允许在渲染子部件之前对它们进行变换。

一、Transform构造函数与属性

Dart 复制代码

class Transform extends SingleChildRenderObjectWidget {
  /// Creates a widget that transforms its child.
  const Transform({
    super.key,
    required this.transform,
    this.origin,
    this.alignment,
    this.transformHitTests = true,
    this.filterQuality,
    super.child,
  });

Transform重要属性如下：

|---------------|---------------------------------------------------------|
| 属性 | 作用 |
| transform | 在绘画过程中用来变换子对象的矩阵。 |
| origin | 应用矩阵的坐标系原点（相对于此渲染对象的左上角）。 |
| alignment | 原点的对齐方式。 |
| child | 子部件。 |
| filterQuality | FilterQuality 用于控制图片和图形在缩放时的抗锯齿效果。它影响渲染时图像的质量和性能。 |

复制代码

transform

Dart 复制代码

  /// The matrix to transform the child by during painting.
  final Matrix4 transform;

transform属性是一个4x4的矩阵，它定义了部件的变换方式。可以使用Matrix4类提供的方法来创建不同类型的变换矩阵。

origin

Dart 复制代码

  /// The origin of the coordinate system (relative to the upper left corner of
  /// this render object) in which to apply the matrix.
  ///
  /// Setting an origin is equivalent to conjugating the transform matrix by a
  /// translation. This property is provided just for convenience.
  final Offset? origin;

origin属性定义了变换的基点，应用矩阵的坐标系原点（相对于此渲染对象的左上角）。

alignment

Dart 复制代码

/// The alignment of the origin, relative to the size of the box.
///
/// This is equivalent to setting an origin based on the size of the box.
/// If it is specified at the same time as the [origin], both are applied.
///
/// An [AlignmentDirectional.centerStart] value is the same as an [Alignment]
/// whose [Alignment.x] value is `-1.0` if [Directionality.of] returns
/// [TextDirection.ltr], and `1.0` if [Directionality.of] returns
/// [TextDirection.rtl].	 Similarly [AlignmentDirectional.centerEnd] is the
/// same as an [Alignment] whose [Alignment.x] value is `1.0` if
/// [Directionality.of] returns	 [TextDirection.ltr], and `-1.0` if
/// [Directionality.of] returns [TextDirection.rtl].
final AlignmentGeometry? alignment;

alignment变换的对齐方式。

filterQuality

Dart 复制代码

  /// The filter quality with which to apply the transform as a bitmap operation.
  ///
  /// {@template flutter.widgets.Transform.optional.FilterQuality}
  /// The transform will be applied by re-rendering the child if [filterQuality] is null,
  /// otherwise it controls the quality of an [ImageFilter.matrix] applied to a bitmap
  /// rendering of the child.
  /// {@endtemplate}
  final FilterQuality? filterQuality;

FilterQuality 用于控制图片和图形在缩放时的抗锯齿效果。它影响渲染时图像的质量和性能。

child

Dart 复制代码

  /// The widget below this widget in the tree.
  ///
  /// {@macro flutter.widgets.ProxyWidget.child}
  final Widget? child;

child子部件。

二、Transform作用

Transform用于对其子组件应用变换效果，如平移、旋转、缩放或倾斜。

三、Transform示例

平移

平移通过Transform.translate()方法来实现，通过设置offset参数来指定平移的距离。

Dart 复制代码

import 'package:flutter/material.dart';

class TransformTranslatePage extends StatelessWidget {
  const TransformTranslatePage({super.key});


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[300],
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                color: Colors.grey[400],
                child: Transform.translate(
                  offset: Offset(50, 0),
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.blue,
                    child: Center(
                      child: Center(
                        child: Text(
                          "平移效果",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              Container(
                color: Colors.grey[500],
                child: Transform.translate(
                  offset: Offset(0, 50),
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.red,
                    child: Center(
                      child: Text(
                        "向下平移",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

旋转

Dart 复制代码

import 'package:flutter/material.dart';

class TransformRotatePage extends StatelessWidget {
  const TransformRotatePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[300],
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                color: Colors.grey[400],
                child: Transform.rotate(
                  angle: 0.5,
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.blue,
                    child: Center(
                      child: Text(
                        "旋转效果",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ),
              ),
              Container(
                color: Colors.grey[600],
                child: Transform.rotate(
                  angle: 1.0,
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.orange,
                    child: Center(
                      child: Text(
                        "旋转效果",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

缩放

Dart 复制代码

import 'package:flutter/material.dart';

class TransformScalePage extends StatelessWidget {
  const TransformScalePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey[400],
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    "缩放效果",
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
              Container(
                color: Colors.grey[800],
                child: Transform.scale(
                  scale: 1.5,
                  child: Container(
                    width: 100,
                    height: 100,
                    color: Colors.orange,
                    child: Center(
                      child: Text(
                        "缩放效果",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}