Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效,允许在渲染子部件之前对它们进行变换。
一、Transform构造函数与属性
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
/// The matrix to transform the child by during painting.
final Matrix4 transform;transform属性是一个4x4的矩阵，它定义了部件的变换方式。可以使用Matrix4类提供的方法来创建不同类型的变换矩阵。
- origin
/// 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
/// 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
/// 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
/// The widget below this widget in the tree.
///
/// {@macro flutter.widgets.ProxyWidget.child}
final Widget? child;child子部件。
二、Transform作用
Transform用于对其子组件应用变换效果，如平移、旋转、缩放或倾斜。
三、Transform示例
平移
平移通过Transform.translate()方法来实现，通过设置offset参数来指定平移的距离。
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),
),
),
),
),
)
],
),
),
),
);
}
}
旋转
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),
),
),
),
),
)
],
),
),
),
);
}
}
缩放
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),
),
),
),
),
)
],
),
),
),
);
}
}
