Jetpack Compose按钮组件使用实例详细讲解

这篇文章主要介绍了Jetpack Compose按钮组件使用实例，按钮组件Button是用户和系统交互的重要组件之一，它按照Material Design风格实现，我们先看下Button的参数列表，通过参数列表了解下Button的整体功能

概述

按钮组件Button是用户和系统交互的重要组件之一，它按照Material Design风格实现，我们先看下Button的参数列表，通过参数列表了解下Button的整体功能

@Composable fun Button( onClick: () -> Unit, // 点击按钮时的回调 modifier: Modifier = Modifier, // 修饰符 enabled: Boolean = true, // 是否启用按钮 interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, elevation: ButtonElevation? = ButtonDefaults.elevation(), // 按钮的阴影 shape: Shape = MaterialTheme.shapes.small, border: BorderStroke? = null, colors: ButtonColors = ButtonDefaults.buttonColors(), contentPadding: PaddingValues = ButtonDefaults.ContentPadding, content: @Composable RowScope.() -> Unit )

Button组件的第一个参数onClick是必填项，这是按钮组件最重要的功能，通过回调响应用户的点击事件，最后一个参数content也是必填项，展示按钮的内容。Compose 的Button组件默认没有任何UI，它仅仅是一个响应onClick的容器，它的UI需要在content中通过其他组件实现

1.普通Button按钮

假设我们需要创建一个显示文字的Button，代码如下：

  @Composable fun ButtonDemo() { Button(onClick = { /*TODO*/ }) { Text(text = "OK") } }

运行结果：

假如我们想在按钮文字的左边加一个图标，代码如下

    @Composable fun ButtonIconDemo(){ Button(onClick = { /*TODO*/ }) { Icon(imageVector = Icons.Filled.Done, contentDescription = null, modifier = Modifier.size(ButtonDefaults.IconSize)) Spacer(modifier = Modifier.size(ButtonDefaults.IconSpacing)) Text(text = "OK") } }

这样就在文字“OK”的左边加了一个打勾的图标了

运行结果：

在传统的Button中，有一个很好用的功能，就是selector，即点击按钮的时候，可以自定义按钮的点击效果，在Compose中当然也可以，Button中的参数interactionSource就是做这个事情的。interactionSource通过以下的桑格函数获取当前组件的状态的：

interactionSource.collectIsPressedAsState()：判断是否是按下状态
interactionSource.collectIsFocusedAsState()：判断是否是获取焦点的状态
interactionSource.collectIsDraggedAsState()：判断是否拖动

我们可以通过实例来看下如何使用interacrtionSource来实现类似传统button的selector效果，代码如下：

    @Composable fun InteractionButtonDemo() { val interact = remember { MutableInteractionSource() } val pressState = interact.collectIsPressedAsState() val borderColor = if(pressState.value) Color.Green else Color.Red Button(onClick = { /*TODO*/ }, border = BorderStroke(2.dp, color = borderColor), interactionSource = interact ) { Text(text = "Long click") } }

上面的代码实现的是按钮在通常情况下边框为红色，点击的时候边框为绿色

运行结果：

Button 并非唯一的可点击组件，理论上任何Compose组件都可以通过Modifier.clickable修饰符制作成可点击组件，而当Button被点击的时候，需要额外进行一些事件响应处理，比如水波纹的处理，Button 的onClick在底层是通过覆盖Modifier.clickable实现的，所以我们使用button时不要为Button覆盖Modifier.clickable.

2.IconButton图标按钮

IconButton组件实际上只是Button组件的简单封装，它就是一个可以点击的图标，它一般用于应用栏中的导航或者其他的行为，我们需要在IconButton组件里面提供一个图标组件，这个图标组件的尺寸一般是24x24dp,看下面的例子：

   @Composable fun IconButtonDemo() { IconButton(onClick = { /*TODO*/ }) { Icon(imageVector = Icons.Filled.Favorite, contentDescription = null) } }

运行结果

简单例子，不多讲解

3.FloatingActionButton悬浮按钮

FloatingActionButton悬浮按钮代表当前页面的主要行为，它也需要我们提供一个Icon组件，代码如下：

    @Composable fun FloatButtonDemo() { FloatingActionButton(onClick = { /*TODO*/ }) { Icon(imageVector = Icons.Filled.ArrowBack, contentDescription = null) } }

运行结果：

悬浮按钮其实还有一个带文字的扩展悬浮按钮ExtendedFloatingActionButton组件，使用方法如下：

   @Composable fun ExtFloatButtonDemo(){ ExtendedFloatingActionButton(icon = {Icon(imageVector = Icons.Filled.Favorite, contentDescription = null ) }, text = { Text(text = "我喜欢的") }, onClick = { /*TODO*/ }) }

运行结果：