Jetpack Compose 之 Button

177 阅读1分钟

Button 普通按钮

@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
)

基本用法

Button(onClick = { } ) {
 Text(text = "我是一个按钮")
} 

参数介绍

  • onClick ****点击回调
onClick: () -> Unit
  • enabled 是否可以点击
  • elevation 投影
  • border 边框
Button(onClick = { } , border = BorderStroke(1.dp, color = Color.Red)) {
 Text(text = "我是一个按钮")
} 

  • color 设置颜色
Button(
    onClick = { } ,
    border = BorderStroke(1.dp, color = Color.Red),
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color.Blue,           //非禁用情况下背景色
        contentColor = Color.Black,             //非禁用情况下的内容颜色
        disabledBackgroundColor = Color.Gray,   //禁用情况下的背景色
        disabledContentColor = Color.Green      //禁用情况下的内容颜色
    )
) {
 Text(text = "我是一个按钮")
} 

  • contentPadding 内容距离
Button(
    onClick = { } ,
    border = BorderStroke(1.dp, color = Color.Red),
    colors = ButtonDefaults.buttonColors(
        backgroundColor = Color.Blue,           //非禁用情况下背景色
        contentColor = Color.Black,             //非禁用情况下的内容颜色
        disabledBackgroundColor = Color.Gray,   //禁用情况下的背景色
        disabledContentColor = Color.Green      //禁用情况下的内容颜色
    ),
    contentPadding = PaddingValues ( 10. dp )
) {
 Text(text = "我是一个按钮")
} 

TextButton 文字按钮

属性与Button基本相同

TextButton(onClick = {  } ) {
 Text(text = "文字按钮")
} 

OutlineButton 外链按钮

属性与Button基本相同

OutlinedButton(onClick = { } ) {
 Text(text = "外链按钮")
} 

IconButton 图标按钮

比Button的属性少,一般用来显示图标的按钮

IconButton(onClick = { } ) {
 Icon(imageVector = Icons.Default.Lock, contentDescription = null)
}