Compose中的Button

---

theme: channing-cyan

基础API

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, // 内边距，默认上下8dp，左右16dp content: @Composable RowScope.() -> Unit // 内部内容(可以把Button理解为一个FrameLayout，content就是子View) ) 我们可以把Button理解为Android中的FrameLayout，也就是帧布局，内部可以放任何子View，而Button只是提供了可点击属性而已，当然也可以添加各种顶层装饰，我们先来看个Demo:

示例直接列举了几种常见的Button，当然很简单，但是这些示例不需要创建任何xml布局，而且基本上都是两三行代码实现的。

比方说，第二个圆角边框按钮:

Button( onClick = { Toast.makeText(context, "Click Button", Toast.LENGTH_SHORT).show() }, // 点击弹出吐司 shape = RoundedCornerShape(8.dp), // 圆角8dp border = BorderStroke(2.dp, color = Color.Magenta) // 边框2dp，粉色 ) { Text(text = "RoundedBorder") // 展示文字 }

再比如第三个图片按钮:

Button(onClick = { Toast.makeText(context, "Click Button", Toast.LENGTH_SHORT).show() }) // 点击弹出吐司 { // 内部直接放一张图片完事 Image( painter = painterResource(id = R.drawable.ic_google), contentDescription = "ImageButton", modifier = sizeModifier ) } 说白了，就是一个道理，因为是个布局，所以可以放置任何内容，有无限可能性。

基础但非主流API

我们先看个demo: @Composable fun ButtonDemo1(context: Context) { Button( onClick = { Toast.makeText(context, "Click Button", Toast.LENGTH_SHORT).show() }, shape = RoundedCornerShape(16.dp), // 16dp的圆角 border = BorderStroke(2.dp, Color.DarkGray), // 灰色边框 ) { Text( text = "Button", modifier = Modifier.background(Color.Red), // 背景为红色 ) } } 效果如下:

我们看到，Text文字独立于Button而存在， 这证明了Button就是一个布局，而Text是内部的一个子View而已，现在让我们给Button添加背景，添加如下代码: modifier = Modifier.background(Color.Green) // 给Button添加绿色背景 效果如下:

我们看到，Button背景是绿色，而边框绘制在背景上，这是因为对于Compose控件来说，background和控件本身的内容是两个图层，控件本身的内容是绘制在background上面的。

现在让我们去掉Text中的 modifier = Modifier.background(Color.Red) // 背景为红色 然后使用Button自带的colors属性，代码如下: ``` @Composable fun ButtonDemo1(context: Context) { Button( onClick = { Toast.makeText(context, "Click Button", Toast.LENGTH_SHORT).show() }, shape = RoundedCornerShape(16.dp), // 16dp的圆角 border = BorderStroke(2.dp, Color.DarkGray), // 灰色边框 modifier = Modifier.background(Color.Green), //给Button添加绿色背景 contentPadding = PaddingValues(40.dp), // 添加内边距 colors = object : ButtonColors { // 添加颜色 @Composable override fun backgroundColor(enabled: Boolean): State { // 内容的背景颜色: 可用时为黄色，不可用为灰色 return rememberUpdatedState(if (enabled) Color.Yellow else Color.Gray) }

@Composable
        override fun contentColor(enabled: Boolean): State<Color> {
            // 内容的内容颜色: 可用时为绿色，不可用时为蓝色
            return rememberUpdatedState(if (enabled) Color.Green else Color.Blue)
        }
    },
    enabled = true
) {
    Text(text = "Button")
}

} ``` 效果如下:

此乃情理之内，意料之中，现在让我们将enabled改为false: enabled = false 效果如下:

完全意料之内，前面我们说过，Compose的UI绘制，是后面覆盖前面，现在让我们再给Text添加背景色和文字颜色，如下: Text(text = "Button", color = Color.White, modifier = Modifier.background(Color.Red)) 效果如下:

完全再意料之内。

Button的API非常简单，说白了当成Android原生xml中的FrameLayout看就行，比如，开头的各种Button组合效果代码:

``` @Composable fun ButtonDemo2(context: Context) {

// 点击事件
val onClick = { Toast.makeText(context, "Click Button", Toast.LENGTH_SHORT).show() }

val sizeModifier = Modifier.size(width = 32.dp, height = 32.dp)

Column(verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxSize()) {

    // 文字按钮
    Button(onClick = onClick, elevation = ButtonDefaults.elevation(pressedElevation = 8.dp)) {
        Text(text = "TextButton")
    }

    Spacer(modifier = Modifier.size(width = 10.dp, height = 8.dp))

    Button(
        onClick = { Toast.makeText(context, "Click Button", Toast.LENGTH_SHORT).show() },
        shape = RoundedCornerShape(8.dp),
        border = BorderStroke(2.dp, color = Color.Magenta)
    ) {
        Text(text = "RoundedBorder")
    }

    Spacer(modifier = Modifier.size(width = 10.dp, height = 8.dp))

    // 图片按钮
    Button(onClick = onClick) {
        Image(
            painter = painterResource(id = R.drawable.ic_google),
            contentDescription = "ImageButton", modifier = sizeModifier
        )
    }

    Spacer(modifier = Modifier.size(width = 10.dp, height = 8.dp))

    // 图上字下
    Button(onClick = onClick) {
        Column(verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
            Image(painter = painterResource(id = R.drawable.ic_google), contentDescription = "ImageButton", modifier = sizeModifier)
            Text(text = "图上字下")
        }
    }

    Spacer(modifier = Modifier.size(width = 10.dp, height = 8.dp))

    // 图下字上
    Button(onClick = onClick) {
        Column(verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally) {
            Text(text = "图下字上")
            Image(painter = painterResource(id = R.drawable.ic_google), contentDescription = "ImageButton", modifier = sizeModifier)
        }
    }

    Spacer(modifier = Modifier.size(width = 10.dp, height = 8.dp))

    // 图左字右
    Button(onClick = onClick) {
        Row(horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
            Image(painter = painterResource(id = R.drawable.ic_google), contentDescription = "ImageButton", modifier = sizeModifier)
            Text(text = "图左字右")
        }
    }

    Spacer(modifier = Modifier.size(width = 10.dp, height = 8.dp))

    // 图右字左
    Button(onClick = onClick) {
        Row(horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
            Text(text = "图右字左")
            Image(painter = painterResource(id = R.drawable.ic_google), contentDescription = "ImageButton", modifier = sizeModifier)
        }
    }
}

} ```

完整代码在这里获取: https://gitee.com/lloydfinch/compose-text-demo