Flutter开发之——单组件布局容器-Transform

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • Transform是对容器进行坐标变换的单组件布局容器
  • Transform中常见的变换操作有：translate(平移)，rotate(旋转)，scale(缩放)

二 Transform

2.1 构造方法

1
2
3
4
5
6
7
8
9
const Transform({
    Key? key,
    required this.transform,
    this.origin,
    this.alignment,
    this.transformHitTests = true,
    Widget? child,
  }) : assert(transform != null),
       super(key: key, child: child);

2.2 Transform类方法

translate

1
2
3
4
5
6
7
8
9
Transform.translate({
    Key? key,
    required Offset offset,
    this.transformHitTests = true,
    Widget? child,
  }) : transform = Matrix4.translationValues(offset.dx, offset.dy, 0.0),
       origin = null,
       alignment = null,
       super(key: key, child: child);

rotate

1
2
3
4
5
6
7
8
9
Transform.rotate({
    Key? key,
    required double angle,
    this.origin,
    this.alignment = Alignment.center,
    this.transformHitTests = true,
    Widget? child,
  }) : transform = Matrix4.rotationZ(angle),
       super(key: key, child: child);

scale

1
2
3
4
5
6
7
8
9
Transform.scale({
    Key? key,
    required double scale,
    this.origin,
    this.alignment = Alignment.center,
    this.transformHitTests = true,
    Widget? child,
  }) : transform = Matrix4.diagonal3Values(scale, scale, 1.0),
       super(key: key, child: child);

三 示例

3.1 构造方法

代码

1
2
3
4
5
6
Transform(
            transform: Matrix4.rotationZ(0.5),
            origin: Offset(0,0),
            alignment: Alignment.center,
            child: Container(width: 100,height: 100,color: Colors.red,),
          )

效果图

3.2 类方法

代码

1
2
3
4
5
6
7
8
Transform.rotate(
            angle: 12.0,
            child: Container(
              padding: const EdgeInsets.all(8.0),
              color: const Color(0xFFE8581C),
              child: const Text('Apartment for rent!'),
            ),
          )

效果图