如何在 Jetpack Compose 中对 ActionBar 下的内容应用模糊效果？

Question

到目前为止，我有一个简单的

Scafold

和透明的

ActionBar

和

StatusBar

，我的内容在两个栏下滚动得很好，包括一个

scrollBehavior

将顶部颜色更改为透明黑色。这是相关代码：

主要活动

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        enableEdgeToEdge()

        ...

主要可组合项

...

val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
Scaffold(
    modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
    topBar = {
        TopAppBar(
            title = {
                Text(currentScreen.route)
            },
            scrollBehavior = scrollBehavior,
            colors = TopAppBarDefaults.topAppBarColors(
                containerColor = Color.Transparent,
                scrolledContainerColor = Color.Black.copy(alpha = 0.75f),
                navigationIconContentColor = Color.Black,
                titleContentColor = MaterialTheme.colorScheme.primary,
                actionIconContentColor = Color.Black
            )
        )
    },
) { padding ->
    Box {
        Background()
        MainNavHost(
            modifier = Modifier.fillMaxSize(),
            navController = navController,
            contentPadding = padding
        )
    }
}

它有效，我对结果很满意，但如果有一种方法可以对隐藏在

ActionBar

下的内容应用模糊效果，就像

iOS

本身所做的那样，那就太好了。

有什么方法可以达到这个效果吗？

Answer 1

从 Android 12 开始，您可以使用

blur

修饰符。对于向后移植，请考虑使用第三方库，例如 this one。