Jetpack Compose：如何禁用浮动操作按钮？

Question

根据docs，我们可以通过将null设置为它的onClick:

来禁用FAB

onClick - will be called when user clicked on this FAB. The FAB will be disabled when it is null.

当我尝试时，我偶然发现 onClick 参数不可为空，

那么，如何关闭FAB呢？

Answer 1

目前 (1.0.x) FloatingActionButton 不支持 enabled 属性.

作为解决方法，您可以使用 Button 和 CircleShape。

var enabled by remember { mutableStateOf(false) }
Button(
    onClick = { /* do something */},
    modifier = Modifier.defaultMinSize(minWidth = 56.dp, minHeight = 56.dp),
    enabled = enabled,
    shape = CircleShape

){
    Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
}

如果你想使用 FloatingActionButton 你可以这样做：

var enabled by remember { mutableStateOf(false) }


CompositionLocalProvider(LocalRippleTheme provides
        if (enabled)  LocalRippleTheme.current else NoRippleTheme) {
    FloatingActionButton(
        backgroundColor = if (enabled) MaterialTheme.colors.secondary else Gray,
        onClick = { if (enabled) { /* do something */ } else {} },
    ) {
        Icon(Icons.Filled.Favorite,
            contentDescription = "Localized description",
        tint = if (enabled)
            LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
        else DarkGray)
    }
}

与：

private object NoRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = Color.Unspecified

    @Composable
    override fun rippleAlpha(): RippleAlpha = RippleAlpha(0.0f, 0.0f, 0.0f, 0.0f)
}