概述

按钮组件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")
        }
    }

运转成果：

Jetpack Compose基础组件之按钮组件
假如咱们想在按钮文字的左面加一个图标，代码如下


    @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”的左面加了一个打勾的图标了 运转成果：

Jetpack Compose基础组件之按钮组件
在传统的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")
        }
    }

上面的代码完成的是按钮在通常情况下边框为红色，点击的时分边框为绿色 运转成果：

Jetpack Compose基础组件之按钮组件
Jetpack Compose基础组件之按钮组件
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)
        }
    }

运转成果

Jetpack Compose基础组件之按钮组件
简略例子，不多解说

3.FloatingActionButton悬浮按钮

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

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

运转成果：

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

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

运转成果：

Jetpack Compose基础组件之按钮组件

总结

以上便是今日的内容，本文首要介绍了按钮组件的使用，以及图标按钮和悬浮按钮，这些按钮在开发中调试和完成实际的需求都很有用，主张读者多做练习。渐渐使用到自己的项目当中去