Jetpack Compose - Button

2023-10-29 18:16:04

Jetpack Compose - Button

关于Button官方给出了很多种样式，有Button、IconButton、IconToggleButton、TextButton、OutlinedButton等，还有一个RadioButton我们会单独开文章去讲解。

1、Button

1.1、属性一览

我们先来看下 Button 的属性，链接在这里：

@Composable fun Button(
    onClick: () -> Unit, 
    modifier: Modifier = Modifier, 
    enabled: Boolean = true, 
    interactionState: InteractionState = remember { InteractionState() }, 
    elevation: ButtonElevation? = ButtonConstants.defaultElevation(), 
    shape: Shape = MaterialTheme.shapes.small, 
    border: BorderStroke? = null, 
    colors: ButtonColors = ButtonConstants.defaultButtonColors(), 
    contentPadding: PaddingValues = ButtonConstants.DefaultContentPadding, 
    content: RowScope.() -> Unit
): Unit

onClick: () -> Unit
单击按钮的事件回调，如果不提供该回调，那么按钮将变为禁用状态；
modifier: Modifier = Modifier
修饰符
enabled: Boolean = true
控制按钮的启用状态。如果为false，则该按钮将不可单击；
interactionState: InteractionState = remember { InteractionState() }
表示交互的状态信息，也就是相当于我们之前给按钮设置的各种selector，来实现普通、点击效果等，下文代码详解；
elevation: ButtonElevation? = ButtonConstants.defaultElevation()
按钮的阴影大小效果，设置为null不显示阴影效果，一般我们开发中应该也不会使用这种阴影效果。
shape: Shape = MaterialTheme.shapes.small
定义按钮的形状及阴影等效果；
border: BorderStroke? = null
设置按钮的边框（目前alpha07版本的设置border后效果并不好，按钮四个角落还会显示出来部分按钮默认的背景色）；
colors: ButtonColors = ButtonConstants.defaultButtonColors()
用于在不同状态下设置按钮的背景色以及内容色；
contentPadding: PaddingValues = ButtonConstants.DefaultContentPadding
容器和控件之间的距离值
content: RowScope.() -> Unit
关于这个参数官方文档居然没有讲解，这个是按钮的内容，什么意思呢？你想想看按钮包含文本信息对吧，也可能包含图标信息吧，所以这个参数就是让你组合你需要的控件的，注意它是横向的。

1.2、使用示例

首先显示一个最简单的Button代码如下，该按钮应用的都是默认配置项：

@Composable
fun ButtonDemo() {
    Button(
        onClick = { },
    ) {
        Text(
            text = "这是一个按钮",
        )
    }
}

这就是一个组合了一个简单文本的按钮，平常我们开发的时候需要的都是有点击效果的啊，还有圆角啊各种的，下面就一起来解决。
首先根据上文的属性，我们需要知道按钮当前的状态，是默认状态还是点击状态，对的，就是InteractionState()这个东西，目前只有默认、Dragged和Pressed几种状态。具体用法请看下文代码val interactionState = remember { InteractionState() }，目前官方写法是这样的，但是不清楚api是否还会有变更。我们拿到这个状态后需要“枚举”这些状态值，根据不同的状态设置不同的文本，文本颜色，按钮颜色等。所以我们新建了一个data类来记录这些属性不同状态下按钮的各种值。
data类如下：

data class ButtonState(var text: String, var textColor: Color, var buttonColor: Color)

然后在枚举这些值的时候，我们创建相应的按钮状态对象，下面是kotlin的解构用法，仅为示例效果，大家可以采用其他方式实现。

给按钮设置颜色的时候需要设置解构出来的按钮颜色值，给文本也设置解构出来的文本和文本颜色。
最后我们再给按钮添加一个圆角的修饰符属性，代码如下所示：

@Composable
fun ButtonDemo() {

    val interactionState = remember { InteractionState() }

    val (text, textColor, buttonColor) = when {
        Interaction.Pressed in interactionState -> ButtonState("Just Pressed", Color.Red, Color.Black)
        else -> ButtonState( "Just Button", Color.White, Color.Red)
    }

    Button(
        onClick = { },
        interactionState = interactionState,
        elevation = null,
        colors = ButtonConstants.defaultButtonColors(
            backgroundColor = buttonColor,
            disabledBackgroundColor = Color.Gray,
        ),
        modifier = Modifier
            .clip(RoundedCornerShape(50))
    ) {
        Text(
            text = text,
            color = textColor
        )
    }
}

上面代码中我们去除了按钮的阴影效果，然后实现的点击效果如下，默认红底白字，点击时变为黑底红字：

2、IconButton

2.1、属性一览：

相比Button还是少了很多属性的：

@Composable fun IconButton(
    onClick: () -> Unit, 
    modifier: Modifier = Modifier, 
    enabled: Boolean = true, 
    interactionState: InteractionState = remember { InteractionState() }, 
    content: () -> Unit
): Unit

onClick: () -> Unit
点击回调；
modifier: Modifier = Modifier
修饰符；
enabled: Boolean = true
是否被禁用；
interactionState: InteractionState = remember { InteractionState() }
同上文Button中相关属性；
content: () -> Unit
要在IconButton内部绘制的内容（图标）。通常是一个图标。

2.2、使用示例

其实我一开始使用的时候我看它名字觉得可能是可以在按钮的左侧添加一个Icon图标的特殊按钮，然而事实并不是这样，官方文档是这么写的：

IconButton是可单击的图标，用于表示操作。 IconButton的整体最小触摸目标大小为48 x 48dp，以满足辅助功能准则。内容位于IconButton内部。

最后来了一句内容位于IconButton的内部，什么意思呢，来看下面的代码：

@Composable
fun IconButtonDemo() {
    IconButton(
        onClick = {},
    ) {
        Icon(Icons.Filled.Favorite)
        Text(text = "这是一个按钮")
    }
}

然后预览效果是这样的：

所以这个IconButton你就只用来展示单个可点击的图标就好了，如果需要做 按钮中包含图标和文字的效果 建议直接使用Button然后在其content中组合这两个控件即可。

3、IconToggleButton

官方描述为：具有两个状态的IconButton，我觉得可以是那种点赞和取消点赞的图标，并不是那种开关类型的控件，因为关于开关有Switch。

3.1、属性一览

@Composable fun IconToggleButton(
checked: Boolean,
onCheckedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
interactionState: InteractionState = remember { InteractionState() },
content: () -> Unit
): Unit

属性同样不多，我们只介绍一个特殊的参数：

onCheckedChange: (Boolean) -> Unit
选择此图标时要调用的回调；

3.2、使用示例

这就很简单了，主要在于需要一个状态，但是这个状态却不是普通的布尔值，重点是这个val checkedState = remember { mutableStateOf(true) }，这就表示这个状态是可以被观察和记录的，只要更新，Compose组件就会进行相应的变化：

@Composable
fun IconToggleButtonDemo() {

    val checkedState = remember { mutableStateOf(true) }

    IconToggleButton(
        checked = checkedState.value,
        onCheckedChange = {
            Log.e("Button", "点击了：$it")
            checkedState.value = it
        },
    ) {
        Icon(
            asset = Icons.Filled.Favorite,
            tint = if (checkedState.value) {
                Color.Red
            } else {
                Color.Gray
            }
        )
    }
}

上述代码运行后就可以看到默认状态是红色的喜欢效果，点击后切换为灰色的喜欢效果，这里不再展示效果图了。

码农公寓

Jetpack Compose - Button