簡(jiǎn)介

雖然我們?cè)陂_發(fā)APP的過程中是以功能為主，但是有時(shí)候?yàn)榱嗣烙^或者其他的特殊的需求，需要對(duì)組件進(jìn)行一些變換。在Flutter中這種變換就叫做Transform。

flutter的強(qiáng)大之處在于，可以對(duì)所有的widget進(jìn)行Transform，因此可以做出非?？犰诺男Ч?。

Transform簡(jiǎn)介

在Flutter中，Transform本身也是一個(gè)Widget，它主要是把變換作用在它的子widget上。我們先來(lái)看下Transform的定義和構(gòu)造函數(shù)：

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這幾個(gè)屬性。

其中transform是一個(gè)Matrix4對(duì)象，它是一個(gè)4維的矩陣，用來(lái)描述child應(yīng)該怎么被transform。

origin是一個(gè)Offset對(duì)象，表示的是原始坐標(biāo)系的值，默認(rèn)是左上角。origin和transform是有關(guān)聯(lián)關(guān)系的，我們可以通過修改origin來(lái)達(dá)到不同的transform的效果。

alignment是origin的對(duì)其方式，是一個(gè)AlignmentGeometry對(duì)象。

filterQuality是在進(jìn)行圖像變換的過程中，圖像的取樣質(zhì)量。

除了上面這個(gè)默認(rèn)的構(gòu)造函數(shù)之外，為了簡(jiǎn)單起見Transform還提供了幾個(gè)有特殊作用的構(gòu)造函數(shù)：

  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就是對(duì)子child進(jìn)行旋轉(zhuǎn)變換。

通過傳入angle屬性，實(shí)現(xiàn)子child沿Z軸旋轉(zhuǎn)。

  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的值來(lái)修改原始坐標(biāo)系的位置。

  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，來(lái)對(duì)子child進(jìn)行放大縮小。

從上面的不同構(gòu)造函數(shù)可以看出來(lái)，實(shí)際上最終都將傳入的參數(shù)轉(zhuǎn)換成為Matrix4的transform對(duì)象。

如果你對(duì)Matrix4熟悉的話，那么可以用最直接的構(gòu)造函數(shù)，直接傳入Matrix4。

Transform的使用

上面我們介紹了Transform.rotate，Transform.translate和Transform.scale這幾個(gè)構(gòu)造函數(shù)，接下來(lái)我們將會(huì)使用具體的例子來(lái)進(jìn)行詳細(xì)的講解。

首先是Transform.rotate，用來(lái)對(duì)子組件進(jìn)行旋轉(zhuǎn)，下面是一個(gè)使用的例子：

  Widget build(BuildContext context) {
    return Center(
      child: Transform.rotate(
        angle: pi/4,
        child: const Icon(
            Icons.airplanemode_active,
            size: 200,
          color: Colors.blue,
        ),
      ));
  }

上面的例子將一個(gè)飛機(jī)的Icon旋轉(zhuǎn)pi/4,也就是45度，最后生成的界面如下：

接下來(lái)是Transform.translate，這個(gè)方法主要是對(duì)子組件進(jìn)行坐標(biāo)軸變換，需要傳入一個(gè)offset選項(xiàng)，如下所示：

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

上面我們還是使用了飛機(jī)的圖標(biāo)，不過對(duì)他進(jìn)行了坐標(biāo)軸變換，最后得出的界面如下：

最后我們要展示的是Transform.scale，用來(lái)對(duì)子組件進(jìn)行縮放。

上面我們的圖標(biāo)size是200，我們可以將其縮放為50%，如下所示：

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

運(yùn)行我們可以得到下面的界面：

是不是變小了很多？

總結(jié)

Transform是一個(gè)功能強(qiáng)大的widget，通過Transform我們可以做出很多非常有趣的效果。

以上就是一文帶你了解Android Flutter中Transform的使用的詳細(xì)內(nèi)容，更多關(guān)于Android Flutter Transform的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論