TuniaoUI

Appearance

毛玻璃 ​

TuniaoUI 提供 4 级毛玻璃效果，通过 BLUR_LEVEL 枚举配合 .backdropBlur() 使用。

毛玻璃预览 ​

毛玻璃预览

模糊等级 ​

枚举值模糊值（vp）用途
BLUR_LEVEL.SM10轻微模糊
BLUR_LEVEL.DEFAULT20默认模糊
BLUR_LEVEL.MD40中等模糊
BLUR_LEVEL.LG60强模糊

使用方式 ​

typescript
import { BLUR_LEVEL } from "@tuniao/tn-ui/theme-chalk/blur";

// 使用枚举
.backdropBlur(BLUR_LEVEL.DEFAULT)  // 20vp 模糊
.backdropBlur(BLUR_LEVEL.LG)      // 60vp 强模糊

典型场景 ​

typescript
@ComponentV2
struct BlurDemo {
  build() {
    Stack() {
      // 背景图
      Image($r("app.media.bg"))
        .width("100%")
        .height("100%")

      // 毛玻璃覆盖层
      Column() {
        Text("毛玻璃效果")
          .fontColor($r("app.color.tn_color_white"))
      }
      .width("100%")
      .height("100%")
      .backdropBlur(BLUR_LEVEL.DEFAULT)
      .backgroundColor($r("app.color.tn_overlay_bg"))
    }
  }
}

WARNING

禁止硬编码模糊值，如 .backdropBlur(20)。请始终使用 BLUR_LEVEL 枚举。