Jetpack：007-Kotlin中的Button

news2024/11/26 10:50:45

文章目录

1. 概念介绍
2. 使用方法
- 2.1 Button
- 2.2 IconButton
- 2.3 ElevatedButton
- 2.4 OutlinedButton
- 2.5 TextButton
- 2.6 FloatingActionButton
3. 示例代码
4. 内容总结

我们在上一章回中介绍了Jetpack中输入框相关的内容，本章回中将要介绍 Button。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的Button是指按钮，它是程序中常用的组件，它主要用来触发用户的点击事件，jetpack中提供了各种各样的Button,我们在本章回中将详细介绍这些Button的种类和使用方法。

2. 使用方法

2.1 Button

这个是最常用的按钮，它表示带有背景色的按钮，它通过Button可组合函数实现，该函数中常用的参数如下：

border参数：主要用来控制Button的边框；
colors参数：主要用来控制Button的背景色，文字颜色；
onClick参数：它是方法类型，主要用来响应Button的点击事件；

除了参数外，Button还可以通过尾部的lambda来组合其它组件，比如在尾部组合Text()可以给Button添加文字，组合Icon可以给Button添加图标。我们将在后面的小节中通过示例代码来演示它们的组合方法，同时也会演示如何使用上面介绍过的参数。

2.2 IconButton

该Button表示带有图标的按钮，按钮没有边框和背景色，它通过IconButton()可组合函数实现，该函数的参数和Button中的参数类似，因此不再介绍了。它可以组合Text()或者Icon()实现带文本或者图标的按钮，不过Text和Icon只能组合其中的一个函数，不能同时组合两个函数。

2.3 ElevatedButton

该Button表示没有边框但是有背景色的按钮，它通过ElevatedButton()可组合函数实现，该函数的参数和Button中的参数类似，因此不再介绍了。它可以组合Text()实现带文本的按钮。

2.4 OutlinedButton

该Button表示有边框但是没有背景色的按钮，它通过OutlinedButton()可组合函数实现，该函数的参数和Button中的参数类似，因此不再介绍了。它可以组合Text()实现带文本的按钮，它的效果和ElevatedButton()函数实现的按钮效果正好相反。

2.5 TextButton

该Button表示没有边框和背景色的按钮，它通过TextButton()可组合函数实现，该函数的参数和Button中的参数类似，因此不再介绍了。它可以组合Text()实现带文本的按钮。它的效果和文本类似，只是可以响应点击事件。

2.6 FloatingActionButton

该Button表示悬浮按钮，它不但有边框和背景色，还有阴影效果，它通过FloatingActionButton()可组合函数实现，该函数的参数和Button中的参数类似，因此不再介绍了。它可以组合Text()实现带文本的悬浮按钮。

还有一个ExtendedFloatingActionButton()函数也可以实现悬浮按钮，它可以同时组合Text和Icon两个函数，进而实现带有图标和文本的悬浮按钮。

3. 示例代码

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier.fillMaxWidth()
) {

    val interactionSource = remember {
        MutableInteractionSource()
    }

    //定义按钮不同状态下的颜色
    val pressState = interactionSource.collectIsPressedAsState()
    val borderColor = if (pressState.value) Color.Black else Color.White
    val backgroundColor = if (pressState.value) Color.White else Color.Black
    val textColor =  if (pressState.value) Color.Black else Color.White

    //基础button，圆角形状，无边框但是有背景色
    Button(
        border = BorderStroke(width = 2.dp, color = borderColor),
        colors = ButtonDefaults.buttonColors(
            containerColor = backgroundColor,
            contentColor = textColor
        ),
        //用来控制按钮不同状态下的颜色
        interactionSource = interactionSource,
        onClick = {
            Log.d("tag","bt is clicked")
        }) {
        //图标和文本可以并列存放
        Icon(Icons.Filled.Add, contentDescription = null)
        Spacer(modifier = Modifier.size(8.dp))
        Text(text = "Add")
    }

    //带icon的button,不过icon和文字重叠了,无边框，无背景色
    IconButton(onClick = {  }) {
        Icon(Icons.Default.Add, contentDescription = null)
        Text(text = "Add")
    }

    //浅色背景的按钮，无边框有背景色
    ElevatedButton(onClick = {}) {
        Text(text = "Add")
    }

    //只有边框没有背景色的按钮
    OutlinedButton(onClick = {}) {
        Text(text = "Add")
    }


    //无边框，无背景色的按钮
    TextButton(onClick = {}) {
        Text(text = "Add")
    }


    //悬浮按钮,带有阴影效果
    FloatingActionButton(onClick = {}) {
        //图标和文字不能并列排放
//            Icon(Icons.Default.Add, contentDescription = null )
        Text(text = "add")
    }

    Spacer(modifier = Modifier.size(16.dp))
    ExtendedFloatingActionButton(onClick = {
        var temp = (1..99).random()
        textContent = "it is $temp"
    }) {
        //图标和文字可以并列排放
        Icon(Icons.Default.Add, contentDescription = null )
        Text(text = "add")
    }
}

上面的代码中演示了刚才介绍所有Button,其中包含Button中的参数以及Button和其它函数组合的用法。此外，我们还利用Button的interactionSource参数来动态修改Button的颜色，这样可以让Button在不同状态下显示不同的颜色，比如默认情况下显示黑色，点击按钮时显示白色。

下面是程序的运行效果图，请大家参考：
在这里插入图片描述