文章目录
- 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.Whiteval backgroundColor = if (pressState.value) Color.White else Color.Blackval 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在不同状态下显示不同的颜色,比如默认情况下显示黑色,点击按钮时显示白色。
下面是程序的运行效果图,请大家参考:
4. 内容总结
最后,我们对本章回中介绍的内容做一个总结:
- 按钮是程序中常用的组件,它主要用来触发用户的点击事件;
- 按钮通过可组合函数的参数控制自身的效果,以及响应用户的点击事件;
- 按钮可以组合Text和Icon函数,实现带文本和图标和按钮;
- 按钮有多个种类,不同种类的按钮只是显示效果不同,它们本质上的用法都一样;
看官们,关于Jetpack中Button组件相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!