基本使用
Compose
本身没有给我们提供Button
,但是Material Design
库给我提供了很多中样式的Button
:
Button(onClick = { Log.i(TAG_B,"button点击了") }) {
//button的内容
Text(text = "点我点我")
}
参数onClick
传入一个lambda
,在按钮被点击时调用,按钮内容需要在下方自己定义,这里接收的是一个视图函数,我们可以随意的编写
enabled
enabled
参数可以设置按钮是否可用,false
为不可用,true
可用,默认为true
:
Button(
onClick = { Log.i(TAG_B, "button点击了") },
enabled = false
) {
Text(text = "点我点我")
Text(text = "点我点我")
}
colors
colors
参数可以设置button
的颜色:
Button(
onClick = { Log.i(TAG_B, "button点击了") },
enabled = true,
colors = ButtonDefaults.buttonColors(
backgroundColor = Color.Red,
contentColor = Color.Yellow,
disabledBackgroundColor = Color.DarkGray,
disabledContentColor = Color.Black
)
) {
Text(text = "点我点我")
}
colors
参数接收一个ButtonColors
对象,需要使用ButtonDefaults.buttonColors(backgroundColor,contentColor,disabledBackgroundColor,disabledContentColor)
来创建。
第一个参数backgroundColor
表示设置背景颜色;
第二个参数contentColor
表示设置内容颜色这里比如说是登录文本的颜色;
第三个参数disabledBackgroundColor
表示enable
等于false
的时候的背景颜色;
第四个参数disabledContentColor
表示enable
等于false
时候的内容的颜色;
border
border
参数可以给button
添加边框:
Button(
onClick = { Log.i(TAG_B, "button点击了") },
enabled = false,
border = BorderStroke(1.dp,color = Color.Black)
) {
Text(text = "点我点我")
}
border
接收类型为BorderStroke
,创建BorderStroke
时,需要传入width
宽度和color
颜色
interactionSource
interactionSource
可以处理状态的,比如按下的时候什么效果,正常时候什么效果。类似之前再布局文件里写Selector
:
//创建interactionSource
val interactionSource = remember { MutableInteractionSource() }
//获取点击的状态 是否按下
val pressState = interactionSource.collectIsPressedAsState()
//根据状态改变backgroundColor,按下时改成Green,默认Red
val backgroundColor = if (pressState.value) Color.Green else Color.Red
Button(
onClick = { Log.i(TAG_B, "button点击了") },
enabled = true,
border = BorderStroke(1.dp, color = Color.Black),
colors = ButtonDefaults.buttonColors(
backgroundColor = backgroundColor,
contentColor = Color.Yellow,
disabledBackgroundColor = Color.DarkGray,
disabledContentColor = Color.Black
),
interactionSource = interactionSource
) {
Text(text = "点我点我")
}
上面我们使用interactionSource
实现了按钮按下时背景颜色改成Green
的效果;
shape
shape
参数可以设置形状,比如我们可以把button
设置成圆角:
Button(
onClick = { Log.i(TAG_B, "button点击了") },
shape = RoundedCornerShape(10.dp)
) {
Text(text = "点我点我")
}
elevation
elevation
参数可以设置按钮的阴影,传递null
会禁用按钮的阴影效果:
Button(
onClick = { Log.i(TAG_B, "button点击了") },
shape = RoundedCornerShape(10.dp),
elevation = ButtonDefaults.elevation(10.dp,10.dp,10.dp)
) {
Text(text = "点我点我")
}
ButtonDefaults.elevation(defaultElevation,pressedElevation,disabledElevation)
三个属性值,第一个defaultElevation
表示默认的阴影,pressedElevation
表示按下时的阴影,disabledElevation
表示未启用时候的阴影。
contentPadding
contentPadding
参数可以设置button
的内边距:
Button(
onClick = { Log.i(TAG_B, "button点击了") },
shape = RoundedCornerShape(10.dp),
contentPadding = PaddingValues(20.dp,5.dp,20.dp,5.dp)
) {
Text(text = "点我点我")
}
PaddingValues
有一下几个构造方法 :
PaddingValues(all)
all表示上下左右都用该边距;PaddingValues(horizontal: Dp, vertical: Dp)
horizontal
左右边距,vertical
上下边距;PaddingValues( start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp)
start
按钮起始方向的边距,通常为左边,top
上边距,end
按钮结束方向的边距,通常为右边,bottom
下边距;
默认值为:ButtonDefaults.**ContentPadding**
其他按钮
除了Button
,Material Design
库还给我提供了IconButton
图标按钮FloatingActionButton
悬浮按钮IconToggleButton
图标切换按钮,向点赞,收藏等可以使用这个RadioButton
单选按钮TextButton
文本按钮
等各种样式的按钮,其中的属性和使用方式Button
差不多,详细可以看对应按钮的构造方法