文章目錄

• 簡介
• Transform簡介
• Transform的使用
• 總結

成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站設計、成都做網(wǎng)站與策劃設計,蘭坪網(wǎng)站建設哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設10多年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:蘭坪等地區(qū)。蘭坪做網(wǎng)站價格咨詢:18982081108簡介

雖然我們在開發(fā)APP的過程中是以功能為主，但是有時候為了美觀或者其他的特殊的需求，需要對組件進行一些變換。在Flutter中這種變換就叫做Transform。

flutter的強大之處在于，可以對所有的widget進行Transform，因此可以做出非?？犰诺男Ч?/p>Transform簡介

在Flutter中，Transform本身也是一個Widget，它主要是把變換作用在它的子widget上。我們先來看下Transform的定義和構造函數(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這幾個屬性。

其中transform是一個Matrix4對象，它是一個4維的矩陣，用來描述child應該怎么被transform。

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

alignment是origin的對其方式，是一個AlignmentGeometry對象。

filterQuality是在進行圖像變換的過程中，圖像的取樣質量。

除了上面這個默認的構造函數(shù)之外，為了簡單起見Transform還提供了幾個有特殊作用的構造函數(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就是對子child進行旋轉變換。

通過傳入angle屬性，實現(xiàn)子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進行放大縮小。

從上面的不同構造函數(shù)可以看出來，實際上最終都將傳入的參數(shù)轉換成為Matrix4的transform對象。

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

Transform的使用

上面我們介紹了Transform.rotate，Transform.translate和Transform.scale這幾個構造函數(shù)，接下來我們將會使用具體的例子來進行詳細的講解。

首先是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度，最后生成的界面如下：

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

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

上面我們還是使用了飛機的圖標，不過對他進行了坐標軸變換，最后得出的界面如下：

最后我們要展示的是Transform.scale，用來對子組件進行縮放。

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

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

運行我們可以得到下面的界面：

是不是變小了很多？

總結

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

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

你是否還在尋找穩(wěn)定的海外服務器提供商？創(chuàng)新互聯(lián)www.cdcxhl.cn海外機房具備T級流量清洗系統(tǒng)配攻擊溯源，準確流量調度確保服務器高可用性，企業(yè)級服務器適合批量采購，新人活動首月15元起，快前往官網(wǎng)查看詳情吧

本文題目：flutter系列之:flutter中的變形金剛Transform-創(chuàng)新互聯(lián)
鏈接分享：http://chinadenli.net/article12/dhgigc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供自適應網(wǎng)站、做網(wǎng)站、域名注冊、標簽優(yōu)化、微信小程序、網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)