Compose 调用 - 液态玻璃 Backdrop

原创已于 2026-05-27 05:36:23 修改 · 416 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#Compose #android

于 2026-05-27 04:53:03 首次发布

Compose 专栏收录该内容

69 篇文章

订阅专栏

GitHub

官网教程

一、概念

模糊+液态玻璃效果。

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。

二、添加依赖

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

三、简单使用

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) 颜色滤镜。

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  //边缘彩虹色散，默认关
        )
    }
)