当前位置：首页 > news >正文

Jetpack Compose基础组件之按钮组件

news 2025/7/27 20:41:01

概述

按钮组件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，代码如下：

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

运行结果：
在这里插入图片描述
假如我们想在按钮文字的左边加一个图标，代码如下

@Composablefun 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效果，代码如下：

    @Composablefun InteractionButtonDemo(){val interact = remember {MutableInteractionSource()}val pressState = interact.collectIsPressedAsState()val borderColor = if(pressState.value) Color.Green else Color.RedButton(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,看下面的例子：

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

运行结果
在这里插入图片描述
简单例子，不多讲解

3.FloatingActionButton悬浮按钮

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

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

运行结果：
在这里插入图片描述
悬浮按钮其实还有一个带文字的扩展悬浮按钮ExtendedFloatingActionButton组件，使用方法如下：

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