Jetpack compose 中 FAB 的渐变背景答案

【问题标题】：Gradient backround for FAB in Jetpack composeJetpack compose 中 FAB 的渐变背景
【发布时间】：2021-10-14 17:14:16
【问题描述】：

我想在 Jetpack Compose 中添加一个带有渐变背景的浮动操作按钮。我有以下 sn-p 这样做：

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 背景设置为渐变的更好方法？ Fab Image

【问题讨论】：

标签： android kotlin android-jetpack-compose

【解决方案1】：

'加号图标上的“白色”阴影'是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 默认值，它并没有让它真正浮动，它必须通过容器来完成。

【讨论】：

谢谢，这对我有用，但我必须修改并为.offset(x = (-16).dp, y = (-24).dp), 和elevation 添加一个Card 可组合容器。在 IconButton 上设置时，偏移量表现得很奇怪。

【解决方案2】：

我已开发出以下解决方案，我已确认该解决方案有效：

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun CrazyFloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    gradient: List<Color>,
    contentColor: Color = contentColorFor(gradient[0]),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    content: @Composable () -> Unit
) {
    Surface(
        modifier = modifier,
        shape = shape,
        contentColor = contentColor,
        elevation = elevation.elevation(interactionSource).value,
        onClick = onClick,
        role = Role.Button,
        interactionSource = interactionSource,
        indication = rememberRipple()
    ) {
        CompositionLocalProvider(LocalContentAlpha provides contentColor.alpha) {
            ProvideTextStyle(MaterialTheme.typography.button) {
                Box(
                    modifier = Modifier
                        .defaultMinSize(minWidth = 56.dp, minHeight = 56.dp)
                        .background(brush = Brush.verticalGradient(gradient)),
                    contentAlignment = Alignment.Center
                ) { content() }
            }
        }
    }
}

只需将 Crazy 添加到您的 Composable 中，您就可以开始使用了。

【讨论】：