时间戳

首页 > 解决方案 > Jetpack compose 中 FAB 的渐变背景

android - Jetpack compose 中 FAB 的渐变背景

问题描述

我想在 Jetpack Compose 中添加一个带有渐变背景的浮动操作按钮。我有以下代码段可以做到这一点：

FloatingActionButton(
    onClick = {
        coroutineScope.safeLaunch {
            navController.navigate("AddTodoPage") {
                launchSingleTop = true
            }
        }
    },
    shape = RoundedCornerShape(14.dp),
    backgroundColor = Color.Transparent,
    modifier = Modifier
        .constrainAs(addFab) {
            bottom.linkTo(parent.bottom)
            end.linkTo(parent.end)
        }
        .offset(x = (-16).dp, y = (-24).dp)
        .background(
            brush = Brush.verticalGradient(
                colors = BluePinkGradient()
            ),
            shape = RoundedCornerShape(14.dp)
        )

) {
    Icon(
        painter = painterResource(id = R.drawable.ic_add),
        contentDescription = "Add icon",
        tint = Color.White
    )
}

fun BluePinkGradient(inverse: Boolean = false) = when (inverse) {
    true -> listOf(
        MutedBlue,
        MutedPink
    )
    false -> listOf(
        MutedPink,
        MutedBlue
    )
}
val MutedBlue = Color(0xFF26A69A)
val MutedPink = Color(0xFFEC407A)

但从下图中，该按钮的加号图标上有一个“白色”阴影。如何删除该阴影或将 FAB 背景设置为渐变的更好方法？ 工厂形象

标签： androidkotlinandroid-jetpack-compose

解决方案

'加号图标上的“白色”阴影'是elevation参数的结果。您可以将其归零，但看起来您首先不需要 FAB。

由于您需要自定义按钮，您可以使用IconButton：

IconButton(
    onClick = {
    },
    modifier = Modifier
        .background(
            brush = Brush.verticalGradient(
                colors = BluePinkGradient()
            ),
            shape = RoundedCornerShape(14.dp)
        )

) {
    Icon(
        painter = painterResource(id = R.drawable.ic_undo),
        contentDescription = "Add icon",
        tint = Color.White
    )
}

FloatingActionButton只是对内容应用了一些 Material 默认值，它并没有使它真正浮动，它必须通过容器来完成。

推荐阅读