Compose 调用 - 液态玻璃 Backdrop

一、概念

模糊+液态玻璃效果。

|-------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| rememberLayerBackdrop() | @Composable fun rememberLayerBackdrop( graphicsLayer: GraphicsLayer = rememberGraphicsLayer(), onDraw: ContentDrawScope.() -> Unit = DefaultOnDraw ): LayerBackdrop 创建状态。onDraw 的绘制会画到设置玻璃效果的组件背景上。 |
| layerBackdrop() | fun Modifier.layerBackdrop(backdrop: LayerBackdrop): Modifier 标记背景来源。 |
| drawBackdrop() | fun Modifier.drawBackdrop( backdrop: Backdrop, shape: () -> Shape, //形状 effects: BackdropEffectScope.() -> Unit, //玻璃效果 highlight: (() -> Highlight?)? = DefaultHighlight, //高光 shadow: (() -> Shadow?)? = DefaultShadow, //外阴影 innerShadow: (() -> InnerShadow?)? = null, //内阴影 layerBlock: (GraphicsLayerScope.() -> Unit)? = null, exportedBackdrop: LayerBackdrop? = null, onDrawBehind: (DrawScope.() -> Unit)? = null, //在下层额外绘制 onDrawBackdrop: DrawScope.(drawBackdrop: DrawScope.() -> Unit) -> Unit = DefaultOnDrawBackdrop, //在背景来源层额外绘制 onDrawSurface: (DrawScope.() -> Unit)? = null, //在Surface层额外绘制 onDrawFront: (DrawScope.() -> Unit)? = null //在上层额外绘制 ): Modifier 设置玻璃效果。底层绘制的顺序由低到高：onDrawBehind → onDrawBackdrop → onDrawSurface → drawContent → onDrawFront。 |

二、添加依赖

Kotlin 复制代码

[versions]
composeBackdrop = "2.0.0-rc01"
[libraries]
compose-backdrop = { module = "io.github.kyant0:backdrop", version.ref = "composeBackdrop" }

三、简单使用

Kotlin 复制代码

Box {
    // 创建状态
    val backdrop = rememberLayerBackdrop()
    // 标记背景板
    ScreenContent(Modifier.layerBackdrop(backdrop))
    // 设置玻璃效果
    FloatWidget(
        modifier = Modifier.drawBackdrop(
            backdrop = backdrop,
            shape = { RoundedCornerShape(10.dp) },
            effects = {
                lens(
                    refractionHeight = 5.dp.toPx(),   //折射范围
                    refractionAmount = 15.dp.toPx()    //折射程度
                )
            }
        )
    )
}

四、高级效果 BackdropEffectScope

|-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| lens() | fun BackdropEffectScope.lens( //折射范围（边缘向内的长度）。 @FloatRange(from = 0.0) refractionHeight: Float, //折射程度。 @FloatRange(from = 0.0) refractionAmount: Float, //边缘折射加强，默认关。 depthEffect: Boolean = false, //边缘彩虹色散，默认关 chromaticAberration: Boolean = false ) 透镜。 |
| blur() | fun BackdropEffectScope.blur( @FloatRange(from = 0.0) radius: Float, edgeTreatment: TileMode = TileMode.Clamp ) 模糊程度。 |
| opacity() | fun BackdropEffectScope.opacity(@FloatRange(from = 0.0, to = 1.0) alpha: Float) 边缘折射程度，默认1F，取值范围：0 ~ 1F。 |
| colorControls() | fun BackdropEffectScope.colorControls( brightness: Float = 0f, //亮度 contrast: Float = 1f, //对比度 saturation: Float = 1f //饱和度 ) 色彩调节。 |
| vibrancy() | fun BackdropEffectScope.vibrancy() 高饱和度效果（底层通过颜色滤镜实现）。 |
| colorFilter() | fun BackdropEffectScope.colorFilter(colorFilter: ColorFilter) 颜色滤镜。 |

Kotlin 复制代码

Modifier.drawBackdrop(
    backdrop = backdrop,
    shape = { RoundedCornerShape(10.dp) },
    effects = {
        vibrancy()    //增加饱和度
        opacity(0.9F)   // 边缘折射程度，默认1F，范围：0~1F
        blur(1.dp.toPx())  // 模糊程度
        lens(
            refractionHeight = 5.dp.toPx(),    //折射范围（边缘向内的长度）
            refractionAmount = 15.dp.toPx(),    //折射程度
            depthEffect = true,     //边缘折射加强，默认关
            chromaticAberration = true  //边缘彩虹色散，默认关
        )
    }
)