Android Jetpack Compose毛玻璃效果的实现

发表于 分类于
Android Jetpack Compose毛玻璃效果的实现

前言

毛玻璃效果的本质在于背景的模糊和半透。

静态毛玻璃

Compose的Modifier.blur() 不会自动“看到”背后的 Compose 内容**，它只模糊自己内部的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Box(
    modifier = Modifier
    .width(193.dp)
    .clip(RoundedCornerShape(13.dp))
    .zIndex(1f)
) {
    Box(
        modifier = Modifier
        .fillMaxSize()
        .background(Color.White.copy(0.5f), shape = RoundedCornerShape(13.dp))
        .blur(10.dp)
    ) {
        Image(
            painter = painterResource(id = R.drawable.bg),
            contentDescription = null,
            modifier = Modifier
            .fillMaxSize(),
            contentScale = ContentScale.FillBounds
        )
    }

    ForegroundContent()
}

动态背景

目前无法实现

BlurView 必须指定目标View，而Compose中没法获取目标View。

添加依赖

Dimezis/BlurView: Dynamic iOS-like blur of underlying Views for Android

添加引用

1
implementation('com.github.Dimezis:BlurView:version-3.2.0')