#<blur-view> XElement

<blur-view> 用于为背景内容提供高斯模糊效果，类似于 CSS 中的 backdrop-filter: blur。

适用于需要模糊背景内容的场景。如果只需要对元素自身进行模糊，则无需使用 <blur-view>，直接使用 filter: blur 即可。

#使用指南

#基础用法

blur-viewsrc/base/index.tsx

Code

预览

#iOS 液态玻璃效果

blur-viewsrc/liquid-glass/index.tsx

Code

预览

#属性

#android-capture-target

'android-capture-target'?: string;

用于指定作为模糊源的 Android Lynx view 的 raw id，仅取其与 <blur-view> 相交的区域作为模糊内容。当未设置或无法解析时，Android 使用默认的父节点捕获路径。

#blur-effect

// @默认值: 'light'
'blur-effect'?: 'light' | 'extra-light' | 'dark' | 'glass' | 'glass-container';

主要影响模糊区域的明度： light：明度与背景基本一致； dark：明度比背景更暗； extra-light：明度比背景更亮； glass：渲染为玻璃材质的视觉效果； glass-container：使用 UIGlassContainerEffect 将多个 glass 元素合成为一个组合效果。

#blur-radius

// @默认值: "0px"
'blur-radius'?: string;

高斯模糊半径。

#blur-sampling

// @默认值: 6
'blur-sampling'?: number;

模糊区域的降采样比例，相当于先对背景区域进行缩小模糊再放大还原。会对模糊效果有轻微影响，但能显著提升性能。

#enable-auto-blur

// @默认值: true
'enable-auto-blur'?: boolean;

是否自动更新模糊效果。

#experimental-update-blur-radius

'experimental-update-blur-radius'?: boolean;

切换 Android 内部模糊 buffer 的刷新路径。

#glass-interactive

// @默认值: false
'glass-interactive'?: boolean;

启用玻璃效果的交互行为。

#glass-style

// @默认值: 'regular'
'glass-style'?: 'clear' | 'regular';

玻璃效果的样式。

#glass-tint-color

// @默认值: 'transparent'
'glass-tint-color'?: string;

施加在玻璃效果上的着色（tint color）。

#spacing

// @默认值: 0
spacing?: number;

指定元素之间开始融合的间距阈值。

#兼容性