flutter系列之:flutter中的變形金剛Transform

flydean 發表於 2022-12-05
Flutter

簡介

雖然我們在開發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度,最後生成的介面如下:

flutter系列之:flutter中的變形金剛Transform

接下來是Transform.translate,這個方法主要是對子元件進行座標軸變換,需要傳入一個offset選項,如下所示:

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

上面我們還是使用了飛機的圖示,不過對他進行了座標軸變換,最後得出的介面如下:

flutter系列之:flutter中的變形金剛Transform

最後我們要展示的是Transform.scale,用來對子元件進行縮放。

上面我們的圖示size是200,我們可以將其縮放為50%,如下所示:

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

執行我們可以得到下面的介面:

flutter系列之:flutter中的變形金剛Transform

是不是變小了很多?

總結

Transform是一個功能強大的widget,透過Transform我們可以做出很多非常有趣的效果。

本文的例子:https://github.com/ddean2009/learn-flutter.git