Jetpack Compose 之 Button

基本使用

Compose本身没有给我们提供Button，但是Material Design库给我提供了很多中样式的Button：

Button(onClick = { Log.i(TAG_B,"button点击了") }) {
    //button的内容
    Text(text = "点我点我")
}

参数onClick传入一个lambda，在按钮被点击时调用，按钮内容需要在下方自己定义，这里接收的是一个视图函数，我们可以随意的编写

enabled

enabled参数可以设置按钮是否可用，false为不可用，true可用，默认为true:

Button(
    onClick = { Log.i(TAG_B, "button点击了") },
    enabled = false
) {
    Text(text = "点我点我")
    Text(text = "点我点我")
}

colors

colors参数可以设置button的颜色：

Button(
    onClick = { Log.i(TAG_B, "button点击了") },
    enabled = true,
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color.Red,
        contentColor = Color.Yellow,
        disabledBackgroundColor = Color.DarkGray,
        disabledContentColor = Color.Black
    )
) {
    Text(text = "点我点我")
}

colors参数接收一个ButtonColors对象，需要使用ButtonDefaults.buttonColors(backgroundColor,contentColor,disabledBackgroundColor,disabledContentColor)来创建。
第一个参数backgroundColor表示设置背景颜色；
第二个参数contentColor表示设置内容颜色这里比如说是登录文本的颜色；
第三个参数disabledBackgroundColor表示enable等于false的时候的背景颜色；
第四个参数disabledContentColor表示enable等于false时候的内容的颜色；

border

border参数可以给button添加边框：

Button(
    onClick = { Log.i(TAG_B, "button点击了") },
    enabled = false,
    border = BorderStroke(1.dp,color = Color.Black)
) {
    Text(text = "点我点我")
}

border接收类型为BorderStroke，创建BorderStroke时，需要传入width宽度和color颜色

interactionSource

interactionSource可以处理状态的，比如按下的时候什么效果，正常时候什么效果。类似之前再布局文件里写Selector：

	//创建interactionSource
    val interactionSource = remember { MutableInteractionSource() }
    //获取点击的状态 是否按下
    val pressState = interactionSource.collectIsPressedAsState()
    //根据状态改变backgroundColor,按下时改成Green,默认Red
    val backgroundColor = if (pressState.value) Color.Green else Color.Red
    Button(
        onClick = { Log.i(TAG_B, "button点击了") },
        enabled = true,
        border = BorderStroke(1.dp, color = Color.Black),
        colors = ButtonDefaults.buttonColors(
            backgroundColor = backgroundColor,
            contentColor = Color.Yellow,
            disabledBackgroundColor = Color.DarkGray,
            disabledContentColor = Color.Black
        ),
        interactionSource = interactionSource
    ) {
        Text(text = "点我点我")
    }

上面我们使用interactionSource实现了按钮按下时背景颜色改成Green的效果；

shape

shape参数可以设置形状，比如我们可以把button设置成圆角:

Button(
    onClick = { Log.i(TAG_B, "button点击了") },
    shape = RoundedCornerShape(10.dp)
) {
    Text(text = "点我点我")
}

elevation

elevation参数可以设置按钮的阴影，传递null会禁用按钮的阴影效果：

Button(
    onClick = { Log.i(TAG_B, "button点击了") },
    shape = RoundedCornerShape(10.dp),
    elevation  = ButtonDefaults.elevation(10.dp,10.dp,10.dp)
) {
    Text(text = "点我点我")
}

ButtonDefaults.elevation(defaultElevation,pressedElevation,disabledElevation)三个属性值，第一个defaultElevation表示默认的阴影，pressedElevation表示按下时的阴影，disabledElevation表示未启用时候的阴影。

contentPadding

contentPadding参数可以设置button的内边距：

Button(
    onClick = { Log.i(TAG_B, "button点击了") },
    shape = RoundedCornerShape(10.dp),
    contentPadding = PaddingValues(20.dp,5.dp,20.dp,5.dp)
) {
    Text(text = "点我点我")
}

PaddingValues有一下几个构造方法 ：

• PaddingValues(all) all表示上下左右都用该边距；
• PaddingValues(horizontal: Dp, vertical: Dp) horizontal左右边距，vertical上下边距；
• PaddingValues( start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp) start按钮起始方向的边距，通常为左边，top上边距，end按钮结束方向的边距，通常为右边，bottom下边距；

默认值为：ButtonDefaults.**ContentPadding**

其他按钮

除了Button，Material Design库还给我提供了
IconButton 图标按钮
FloatingActionButton 悬浮按钮
IconToggleButton 图标切换按钮，向点赞，收藏等可以使用这个
RadioButton 单选按钮
TextButton 文本按钮
等各种样式的按钮，其中的属性和使用方式Button差不多，详细可以看对应按钮的构造方法