Android Compose-Button的使用

一、Button的基础使用

1、Button的简单实现

@OptIn(ExperimentalMaterialApi::class)
@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,//按钮内容的padding
    content: @Composable RowScope.() -> Unit //按钮的内容
) 

在最简单的形式下，Button只需要提供一个onClick操作和显示文本。具体代码如下：

@Composable
fun SimpleButton() {
    Button(onClick = {
        // 点击按钮后执行的操作
        println("Button clicked!")
    }) {
        Text("Click Me")
    }
}

在这个例子中，Button控件设置了一个点击操作onClick，点击按钮时会在控制台输出"Button clicked!"。显示的文本是通过Text控件实现的。

2、配置Button的外观

Button的外观可以通过不同参数来配置，包括颜色、高度、阴影等。以下是一个配置外观的组件实现：

@Composable
fun CustomizedButton() {
    Button(
        onClick = { println("Customized Button clicked!") },
        colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red)
    ) {
        Text("Customized Button", color = Color.White)
    }
}

在这个例子中，通过ButtonDefaults.buttonColors函数设置了Button的背景颜色为红色，同时把文本颜色设置为白色。这样配置让Button显得更加美观和醒目。

3、设置Button的形状和大小

按钮的形状和大小可以通过传递Modifier参数来设置。以下是代码示例：

Button(
    onClick = { println("Shaped Button clicked!") },
    modifier = Modifier
        .width(150.dp)
        .height(50.dp),
    shape = RoundedCornerShape(12.dp)
) {
    Text("Shaped Button")
}

这里，Button的宽度设置为150dp，高度为50dp，同时通过RoundedCornerShape设置圆角半径为12dp的圆角矩形形状。

4、添加图标到Button

有时需要在Button上添加图标以提供更明确的用户指引。以下是代码示例：

@Composable
fun IconButton() {
    Button(onClick = { println("Icon Button clicked!") }) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text("Favorite")
    }
}

在上述例子中，Button内嵌了一个图标Icon，使用了内置的Favorite图标，并且在图标和文本之间添加了一个间隔Spacer。

二、 Button的进阶用法

1、禁用按钮

有时需要在特定条件下禁用按钮。结合按钮的不可用状态，代码如下：

@Composable
fun DisabledButton() {
    var isEnabled by remember { mutableStateOf(false) }
    
    Column {
        Button(
            onClick = { println("Button clicked!") },
            enabled = isEnabled
        ) {
            Text("Press Me")
        }
        Spacer(modifier = Modifier.height(16.dp))
        Button(
            onClick = { isEnabled = !isEnabled }
        ) {
            Text(if (isEnabled) "Disable" else "Enable")
        }
    }
}

在这个例子中，第一个Button的enabled属性由布尔值isEnabled控制，用户可以通过点击第二个按钮来切换第一个Button的可用状态。

2、带有Loading状态的Button

在某些交互过程中，可能需要展示加载状态的按钮。例如，一个带有Loading状态的登录按钮的实现：

@Composable
fun LoadingButton() {
    var isLoading by remember { mutableStateOf(false) }

    Button(
        onClick = { 
            isLoading = true
            // 模拟加载
            GlobalScope.launch {
               delay(2000L)
               isLoading = false
            }
        },
        enabled = !isLoading
    ) {
        if (isLoading) {
            CircularProgressIndicator(
                color = Color.White,
                strokeWidth = 2.dp,
                modifier = Modifier.size(20.dp)
            )
            Spacer(modifier = Modifier.width(8.dp))
            Text("Loading...")
        } else {
            Text("Login")
        }
    }
}

在这个例子中，点击按钮后，按钮显示一个CircularProgressIndicator来代表加载中状态，同时按钮文字显示为"Loading…"。加载完成后，按钮恢复到初始状态。

三、Button的高级用法

1、自定义动画Button

在UI设计中，带有动画效果的按钮可以提升用户体验。JetPack Compose让制作动画效果变得更加简便：

@Composable
fun AnimatedButton() {
    var clicked by remember { mutableStateOf(false) }
    val scale by animateFloatAsState(targetValue = if (clicked) 1.2f else 1f)

    Button(
        onClick = {
            clicked = !clicked
        },
        modifier = Modifier.scale(scale)
    ) {
        Text("Animate Me")
    }
}

在这个高级示例中，通过animateFloatAsState函数创建了按钮在点击之后放大的动画效果。按钮在点击后变大，延迟一段时间再恢复原始大小，从而实现了简单的放大点击效果动画。

2、自定义复杂形状Button

通过 Path 和 drawIntoCanvas方法，可以实现更复杂的按钮形状：

@Composable
fun CustomShapeButton() {
    Canvas(modifier = Modifier.size(200.dp).clickable {
        println("Custom Shape Button clicked")
    }) {
        val path = Path().apply {
            moveTo(size.width / 2, 0f)
            lineTo(size.width, size.height)
            lineTo(0f, size.height)
            close()
        }
        
        drawIntoCanvas { canvas ->
            canvas.drawPath(path, Paint().apply {
                color = Color.Magenta
                style = PaintingStyle.Fill
            })
        }
    }
}

这个高级示例展示了如何使用 Path 创建一个三角形的自定义按钮，并通过 drawIntoCanvas 把它绘制在屏幕上。当用户点击三角形区域时，可以捕捉并响应点击事件。