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

2023-05-16 11:43

短信预约 -IT技能 免费直播动态提醒

概述

按钮组件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 = {  }) {
            Text(text = "OK")
        }
    }

运行结果：

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

    @Composable
    fun ButtonIconDemo(){
        Button(onClick = {  }) {
            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 = {  },
           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 = {  }) {
            Icon(imageVector = Icons.Filled.Favorite,
                contentDescription = null)
        }
    }

运行结果

简单例子，不多讲解

3.FloatingActionButton悬浮按钮

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

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

运行结果：

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

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

运行结果：