一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天 点击查看活动详情。
一、Compose中Button
按钮是日常开发中必不可少的，接下来我们一起学习一下Button在Compose中如何使用的吧？
1. 创建Button
@Composable
fun TestButton() {
Button(onClick = {
// 点击操作
}) {
Text(text = "点我")
}
}
我们只需要在Button中设置了点击事件和按钮中显示的控件，一个简单的按钮就创建好了，但是要记住点击事件和按钮中的控件都是必须要设置的，具体实现我们可以不用写，但是一定要声明，不然这个按钮就没有意义了。
我们看一下预览效果吧：
2. 源码解析
话不多说，先上源码：
@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,// 内边距
content: @Composable RowScope.() -> Unit//
)
1. interactionSource
interactionSource表示此按钮的交互流，其类型为MutableInteractionSource，如果要观察交互并自定义此按钮在不同交互中的外观、行为，则可以创建并传递按钮记住的MutableInteractionSource。
2. elevation
elevation用于解析此按钮在不同状态下的高度，其类型为ButtonElevation，它还可以控制下方阴影的大小，看源码：
@Stable
interface ButtonElevation {
/**
* 表示按钮中使用的标准高度，具体取决于enabled和interactionSource
* @param enabled 该按钮是否启用
* @param interactionSource 按钮的interactionSource
*/
@Composable
fun elevation(enabled: Boolean, interactionSource: InteractionSource): State<Dp>
}
我们发现ButtonElevation是一个接口，如果想修改按钮的高度，就需要实现该接口进行修改。我们先看一下它的默认值的源码：
@Composable
fun elevation(
defaultElevation: Dp = 2.dp, // 启用按钮时的默认高度
pressedElevation: Dp = 8.dp, // 启用并按下按钮时的高度
// focused: Dp = 4.dp,
// hovered: Dp = 4.dp,
disabledElevation: Dp = 0.dp // 禁用按钮时的高度
): ButtonElevation {
return remember(defaultElevation, pressedElevation, disabledElevation) {
DefaultButtonElevation(
defaultElevation = defaultElevation,
pressedElevation = pressedElevation,
disabledElevation = disabledElevation
)
}
}
看一下实际用法：
@Composable
fun TestButton() {
Button(onClick = {
// 点击操作
}, elevation = ButtonDefaults.elevation(4.dp,10.dp,0.dp)
) {
Text(text = "点我")
}
}
3. border
border参数类型为BorderStroke，默认值为null，可以用来绘制按钮的边框：
@Composable
fun TestButton() {
Button(
onClick = {
// 点击操作
},
border = BorderStroke(width = 5.dp, color = Color.Red)
) {
Text(text = "点我")
}
}
看一下预览效果：
4. shape
shape可以更改按钮的形状，下面我们实际用一下：
@Composable
fun TestButton() {
Button(
onClick = {
// 点击操作
},
shape = RoundedCornerShape(20.dp)
) {
Text(text = "点我")
}
}
预览效果：
5. colors
colors可以设置按钮在不同状态下的颜色值，参数类型是ButtonColors，而ButtonColors是一个接口，我们来看一下它的默认值的源码：
@Composable
fun buttonColors(
backgroundColor: Color = MaterialTheme.colors.primary,// 背景颜色
contentColor: Color = contentColorFor(backgroundColor),// 内容颜色
disabledBackgroundColor: Color = MaterialTheme.colors.onSurface.copy(alpha = 0.12f)
.compositeOver(MaterialTheme.colors.surface),// 未启用时的背景颜色
disabledContentColor: Color = MaterialTheme.colors.onSurface
.copy(alpha = ContentAlpha.disabled)// 未启用时的内容颜色
): ButtonColors = DefaultButtonColors(
backgroundColor = backgroundColor,
contentColor = contentColor,
disabledBackgroundColor = disabledBackgroundColor,
disabledContentColor = disabledContentColor
)
接下来我们使用看看：
@Composable
fun TestButton() {
Button(
onClick = {
},
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Red,
contentColor = Color.DarkGray
)
) {
Text(text = "点我")
}
}
最后
感谢你看到最后， 最后再说两点~
①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
我是沐小枫，一个热爱学习、热爱编程的山东人
(文章内容仅供学习参考， 如有侵权，非常抱歉，请立即联系作者删除。)
