跳到主要内容

着色遮罩 ShaderMask

一个控件，应用由着色器生成的遮罩到其子控件上。

例如，ShaderMask 可以使用 LinearGradient 遮罩逐渐淡出子控件的边缘。

示例​

实时示例

在图像边缘添加粉色发光效果​

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Row(
            [
                ft.ShaderMask(
                    ft.Image(
                        src="https://picsum.photos/200/200?1",
                        width=200,
                        height=200,
                        fit=ft.ImageFit.FILL,
                    ),
                    blend_mode=ft.BlendMode.MULTIPLY,
                    shader=ft.RadialGradient(
                        center=ft.alignment.center,
                        radius=2.0,
                        colors=[ft.colors.WHITE, ft.colors.PINK],
                        tile_mode=ft.GradientTileMode.CLAMP,
                    ),
                )
            ]
        )
    )

ft.app(target=main)

逐渐向底部淡出图像​

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Row(
            [
                ft.ShaderMask(
                    ft.Image(src="https://picsum.photos/100/200?2"),
                    blend_mode=ft.BlendMode.DST_IN,
                    shader=ft.LinearGradient(
                        begin=ft.alignment.top_center,
                        end=ft.alignment.bottom_center,
                        colors=[ft.colors.BLACK, ft.colors.TRANSPARENT],
                        stops=[0.5, 1.0],
                    ),
                    border_radius=10,
                ),
            ]
        )
    )

ft.app(target=main)

属性​

blend_mode​

将着色器应用于 content 时使用的混合模式。

属性值为 BlendMode 枚举，默认值为 MODULATE。

支持的值包括：

  • CLEAR
  • COLOR
  • COLOR_BURN
  • COLOR_DODGE
  • DARKEN
  • DIFFERENCE
  • DST
  • DST_A_TOP
  • DST_IN
  • DST_OUT
  • DST_OVER
  • EXCLUSION
  • HARD_LIGHT
  • HUE
  • LIGHTEN
  • LUMINOSITY
  • MODULATE（默认值）
  • MULTIPLY
  • OVERLAY
  • PLUS
  • SATURATION
  • SCREEN
  • SOFT_LIGHT
  • SRC
  • SRC_A_TOP
  • SRC_IN
  • SRC_OUT
  • SRC_OVER
  • VALUES
  • XOR

有关混合模式示例，请参见 Flutter 文档中的 BlendMode。

border_radius​

更多关于边框半径的信息，请查看 Container.border_radius 属性文档。

content​

需要应用着色器的子控件。

shader​

使用渐变作为着色器。有关渐变的更多信息，请参见 Container.gradient 属性文档。