Flutter Transform 学习

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});@overrideWidget 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});@overrideWidget 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});@overrideWidget 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),),),),),)],),),),);}
}