Flutter Widgets 之 ShaderMask

ShaderMask可以讓我們將Shader用于任何一個控件上，比如在Text上使用漸變就可以使用ShaderMask來實現：

ShaderMask(
      shaderCallback: (Rect bounds) {
        return RadialGradient(
          center: Alignment.topLeft,
          radius: 1.0,
          colors: <Color>[Colors.yellow, Colors.deepOrange],
          tileMode: TileMode.mirror,
        ).createShader(bounds);
      },
      blendMode: BlendMode.srcATop,
      child: Text('老孟，一枚有態度的程序員',style: TextStyle(fontSize: 30),),
    )

效果：

shaderCallback 需要返回一個Shader對象，可以通過漸變相關類直接生成Shader：

RadialGradient(...).createShader(rect)

blendMode屬性是融合方式，child是目標圖像(dst),Shader是源圖像(src)，融合方式介紹：

英文官方介紹
中文不錯的翻譯

智能推薦

Flutter 基礎Widgets Text()之TextStyle詳解

Text概述即一個單一樣式的文本 Text Widget就是顯示單一樣式的文本字符串。字符串可能會跨越多行，也可能全部顯示在同一行上，具體取決于布局約束。 style參數可選。如果省略了，文本將使用最近的DefaultTextStyle的樣式。如果給定樣式的TextStyle.inherit屬性為true（默認值），則給定樣式將與最近的DefaultTextStyle合并。例如，比如可以在使用默...

Flutter 基礎布局Widgets之Stack詳解

概述 Stack 組件是一種層疊式布局，即組件覆蓋另一個組件，覆蓋的順序取決于在children中放置的順序，使用場景比如在圖片上加上一些文字描述，即將文本Widget覆蓋在圖片組件，詳見下面的小例。構造函數 alignment 子Widgets們的對齊方式 textDirection 文本的方向，默認當然是 left-to-right fit 子Widgets的放置方式，默認loose 子Wi...

Flutter 基礎布局Widgets之Row詳解

概述 Row即創建一個水平的組件列表，是非常常用的組件，而Column即創建一個垂直的組件列表，用法和Row一模一樣，因為Row以及Column都是Flex的子類，它們的具體實現也都是由Flex完成，只是參數不同。構造函數 mainAxisAlignment 在flex布局中，子元素應該如何沿著主軸放置,即各個組件的放置的方式，比如MainAxisAlignment.start 組件都盡量靠近...

Flutter 基礎布局Widgets之FittedBox詳解

FittedBox概述 FittedBox組件的作用是對child組件進行縮放和對齊方式的設置，其縮放的參數為fit，有多種選擇的方式，而對齊方式alinment用法則和之前一致，即很多都是相通的。 FittedBox構造函數 fit 即child的縮放方式，比如以下縮放方式： fill(通過扭曲源的縱橫比填充目標框。): contain(盡可能大，同時仍然將源完全包含在目標框中): cover(...

HTML中常用操作關于：頁面跳轉，空格

1.頁面跳轉 2.空格的代替符...

Flutter Widgets 之 ShaderMask

更多相關閱讀：

如果這篇文章有幫助到您，希望您來個“贊”并關注我的公眾號，非常謝謝。

智能推薦

猜你喜歡