前言
本文会解说Button，IconButton, ExtendedFloatingActionButton, FloatingActionButton,IconToggleButton,OutlinedButton,RadioButton,TextButton这几个Button的用法详解，感兴趣的请往下看
一：Button的用法
先来看看Button的源码(OutlinedButton跟Button的属性一样只是两个按钮的形态不太一样)
@Composablefun 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) { ...}- content 是示意Button的内容。比方外面能够是一个Text
onClick点击的回调
@Preview()@Composablefun buttonTest(){ val context = LocalContext.current Column(modifier = Modifier.padding(10.dp,10.dp)) { Button( onClick = { Toast.makeText(context,"点击了登录",Toast.LENGTH_SHORT).show() } ){ Text(text = stringResource(id = R.string.login)) } }}- modifier 修饰符
enabled 是否能够 (不可用默认是灰色，可用默认是蓝色)
@Preview()@Composablefun buttonTest(){ val context = LocalContext.current Column(modifier = Modifier.padding(10.dp,10.dp)) { Button( onClick = { Toast.makeText(context,"点击了登录",Toast.LENGTH_SHORT).show() }, modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)), enabled = true ){ Text(text = stringResource(id = R.string.login)) } }}border 边框，BorderStroke(width,color)能够设置边框的色彩跟线的宽度。第一个参数width是边框线的宽度，color是边框线的色彩
@Preview()@Composablefun buttonTest(){ val context = LocalContext.current Column(modifier = Modifier.padding(10.dp,10.dp)) { Button( onClick = { Toast.makeText(context,"点击了登录",Toast.LENGTH_SHORT).show() }, modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)), enabled = true, border = BorderStroke(1.dp,color = Color.Black) ){ Text(text = stringResource(id = R.string.login)) } }}interactionSource 能够解决状态的，比方按下的时候什么成果，失常时候什么成果。相似之前再布局文件里写Selector。 比方咱们上面的例子中设置，如果是选中时候边框线的色彩是绿色，没有选中时候是彩色。 interactionSource.collectIsPressedAsState() 判断是否按下状态interactionSource.collectIsFocusedAsState() 判断是否获取焦点的状态interactionSource.collectIsDraggedAsState() 判断是否拖动
@Preview()@Composablefun buttonTest(){ val context = LocalContext.current val interactionSource = remember { MutableInteractionSource() } val pressState = interactionSource.collectIsPressedAsState() val borderColor = if (pressState.value) Color.Green else Color.Black Column(modifier = Modifier.padding(10.dp,10.dp)) { Button( onClick = { Toast.makeText(context,"点击了登录",Toast.LENGTH_SHORT).show() }, modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)), enabled = true, border = BorderStroke(1.dp,color = borderColor), interactionSource = interactionSource ){ Text(text = stringResource(id = R.string.login)) } }}- shape 形态 比方咱们能够设置RoundedCornerShape(20)圆角20dp
elevation 暗影ButtonDefaults.elevation(defaultElevation,pressedElevation,disabledElevation)三个属性值，第一个defaultElevation示意默认的暗影，pressedElevation示意按下时的暗影，disabledElevation示意未启用时候的暗影。
@Preview()@Composablefun buttonTest(){ val context = LocalContext.current val interactionSource = remember { MutableInteractionSource() } val pressState = interactionSource.collectIsPressedAsState() val borderColor = if (pressState.value) Color.Green else Color.Black Column(modifier = Modifier.padding(10.dp,10.dp)) { Button( onClick = { Toast.makeText(context,"点击了登录",Toast.LENGTH_SHORT).show() }, modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)), enabled = true, border = BorderStroke(1.dp,color = borderColor), interactionSource = interactionSource, shape = RoundedCornerShape(20), elevation = ButtonDefaults.elevation(2.dp,8.dp,0.dp) ){ Text(text = stringResource(id = R.string.login)) } }}colors 通过ButtonDefaults.buttonColors(backgroundColor,contentColor,disabledBackgroundColor,disabledContentColor)设置色彩。第一个参数backgroundColor示意设置背景色彩，第二个参数contentColor示意设置内容色彩这里比如说是登录文本的色彩。第三个参数disabledBackgroundColor示意enable等于false的时候的背景色彩，第四个参数disabledContentColor示意enable等于false时候的内容的色彩。
@Preview()@Composablefun buttonTest(){ val context = LocalContext.current val interactionSource = remember { MutableInteractionSource() } val pressState = interactionSource.collectIsPressedAsState() val borderColor = if (pressState.value) Color.Green else Color.Black Column(modifier = Modifier.padding(10.dp,10.dp)) { Button( onClick = { Toast.makeText(context,"点击了登录",Toast.LENGTH_SHORT).show() }, modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)), enabled = true, border = BorderStroke(1.dp,color = borderColor), interactionSource = interactionSource, elevation = ButtonDefaults.elevation(2.dp,8.dp,0.dp), shape = RoundedCornerShape(20), colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red,contentColor = Color.Yellow,disabledBackgroundColor = Color.DarkGray,disabledContentColor = Color.Black) ){ Text(text = stringResource(id = R.string.login)) } }}contentPadding 通过 PaddingValues()去设置。默认是ButtonDefaults.ContentPadding。示意内容的内边距。 PaddingValues有如下几个办法
- PaddingValues(all) all示意上下左右都用该边距
- PaddingValues(horizontal: Dp, vertical: Dp)
- PaddingValues( start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp)
@Preview()@Composablefun buttonTest(){ val context = LocalContext.current val interactionSource = remember { MutableInteractionSource() } val pressState = interactionSource.collectIsPressedAsState() val borderColor = if (pressState.value) Color.Green else Color.Black Column(modifier = Modifier.padding(10.dp,10.dp)) { Button( onClick = { Toast.makeText(context,"点击了登录",Toast.LENGTH_SHORT).show() }, modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)), enabled = true, border = BorderStroke(1.dp,color = borderColor), interactionSource = interactionSource, elevation = ButtonDefaults.elevation(2.dp,8.dp,0.dp), shape = RoundedCornerShape(20), colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red,contentColor = Color.Yellow,disabledBackgroundColor = Color.DarkGray,disabledContentColor = Color.Black), contentPadding = ButtonDefaults.ContentPadding // 或者是contentPadding = PaddingValues(4.dp) ){ Text(text = stringResource(id = R.string.login)) } }}
二：IconButton的用法
IconButton的构造方法如下
@Composablefun IconButton( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable () -> Unit){ ...}- onClick 点击回调
- modifier 修饰符
- enabled 是否可用
- content 该控件蕴含的内容
- interactionSource 跟Button一样，能够依据不同状态去解决一些逻辑。比方按下时候如何，没有按下时候如何。
如下举例。比方IconButton是一个右边是+的icon，左边是文本的控件。该文本如果按下时候是显示缩小，不按下显示增加。
@Preview()@Composablefun iconButtonTest(){ val context = LocalContext.current val interactionSource = remember { MutableInteractionSource() } val pressState = interactionSource.collectIsPressedAsState() val pressText = if(pressState.value) "缩小" else "增加" Column(modifier = Modifier.padding(10.dp,10.dp)) { IconButton( onClick = { Toast.makeText(context,"点击了增加",Toast.LENGTH_SHORT).show() }, modifier = Modifier.size(80.dp,40.dp).clip(RoundedCornerShape(20)), enabled = true, interactionSource = interactionSource ){ Row(verticalAlignment=Alignment.CenterVertically) { Icon(imageVector = Icons.Filled.Add, contentDescription = "增加的按钮",tint = Color.Red) Text(text = pressText,fontSize = 8.sp) } } }}三：FloatingActionButton和ExtendedFloatingActionButton的用法
FloatingActionButton是Material格调的控件，默认是浮动在右下角的圆形控件。FloatingActionButton的构造函数办法如下：
@Composablefun FloatingActionButton( onClick: () -> Unit, modifier: Modifier = Modifier, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)), backgroundColor: Color = MaterialTheme.colors.secondary, contentColor: Color = contentColorFor(backgroundColor), elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(), content: @Composable () -> Unit){ ...}- onClick 点击回调
- modifier 修饰符
- interactionSource 跟下面一样，解决不同状态的
- shape 形态
- backgroundColor 背景色彩
- contentColor内容色彩
- elevation暗影
- content 内容控件（其实ExtendedFloatingActionButton就是在该内容里增加了一个Row，Row里放了个文本跟Icon）
@Preview()@Composablefun floatingActionButtonTest(){ val context = LocalContext.current val interactionSource = remember { MutableInteractionSource() } val pressState = interactionSource.collectIsPressedAsState() val pressText = if(pressState.value) "缩小" else "增加" Column(modifier = Modifier.padding(10.dp,10.dp)) { FloatingActionButton( onClick = { Toast.makeText(context,"点击了按钮",Toast.LENGTH_SHORT).show() }, modifier = Modifier.size(80.dp), interactionSource = interactionSource, shape = RoundedCornerShape(25.dp), backgroundColor = Color.Green, contentColor = Color.Blue, elevation = FloatingActionButtonDefaults.elevation(defaultElevation=8.dp,pressedElevation = 10.dp) ){ Row(verticalAlignment=Alignment.CenterVertically) { Icon(imageVector = Icons.Filled.Add, contentDescription = "Add",tint = Color.Red) Spacer(modifier = Modifier.width(10.dp)) Text(text = "按钮",fontSize =12.sp,color = Color.White) } }}ExtendedFloatingActionButton是FloatingActionButton的扩大 ExtendedFloatingActionButton的构造方法如下
@Composablefun ExtendedFloatingActionButton( text: @Composable () -> Unit, onClick: () -> Unit, modifier: Modifier = Modifier, icon: @Composable (() -> Unit)? = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)), backgroundColor: Color = MaterialTheme.colors.secondary, contentColor: Color = contentColorFor(backgroundColor), elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation()) { ...}- text显示的文本控件
- onClick 点击回调
- modifier 修饰符
- icon 显示的icon控件
- interactionSource 跟下面一样，解决不同状态的
- shape 形态
- backgroundColor 背景色彩
- contentColor内容色彩
- elevation暗影 通过FloatingActionButtonDefaults.elevation(defaultElevation,pressedElevation)设置，第一个参数是默认暗影，第二个是按下时候的暗影
@Preview()@Composablefun extendedFloatingActionButtonTest(){ val context = LocalContext.current val interactionSource = remember { MutableInteractionSource() } val pressState = interactionSource.collectIsPressedAsState() val pressText = if(pressState.value) "缩小" else "增加" Column(modifier = Modifier.padding(10.dp,10.dp)) { ExtendedFloatingActionButton(text = { Text(text = pressText,fontSize =12.sp,color = Color.White)},onClick = { Toast.makeText(context,"点击了按钮",Toast.LENGTH_SHORT).show() },// modifier = Modifier.size(50.dp), icon ={ Icon(imageVector = Icons.Filled.Add, contentDescription = "Add",tint = Color.Red) }, interactionSource = interactionSource, shape = RoundedCornerShape(25.dp), backgroundColor = Color.Green, contentColor = Color.Blue, elevation = FloatingActionButtonDefaults.elevation(defaultElevation=8.dp,pressedElevation = 10.dp)) }}四：IconToggleButton的用法
IconToggleButton是属于那种用于点赞，珍藏的那种Icon能够扭转状态的控件。代码如下：
@Composablefun IconToggleButton( checked: Boolean, onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, content: @Composable () -> Unit) { ...}- checked 是否选中的状态
- onCheckedChange 是否选中状态变动的监听
- modifier 修饰符
- enabled 是否可用
- interactionSource 跟下面Button解释统一
- content 控件内容
比方咱们举个例子，在点赞按下或者选中的时候，用红色的点赞，否则用彩色的点赞图标
@Preview()@Composablefun iconToggleButtonTest(){ val context = LocalContext.current val interactionSource = remember { MutableInteractionSource() } val pressState = interactionSource.collectIsPressedAsState() var isCheck = remember { mutableStateOf(false) } Column(modifier = Modifier.padding(10.dp,10.dp)) { IconToggleButton( checked = isCheck.value, onCheckedChange = { isCheck.value = it }, modifier = Modifier.size(50.dp), enabled = true, interactionSource = interactionSource ){ Icon(imageVector = Icons.Filled.Favorite, contentDescription = "点赞图标",tint = if(isCheck.value || pressState.value) Color.Red else Color.Black) } }}五：RadioButton的用法
RadioButton是单选按钮，RadioButton的代码如下
@Composablefun RadioButton( selected: Boolean, onClick: (() -> Unit)?, modifier: Modifier = Modifier, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, colors: RadioButtonColors = RadioButtonDefaults.colors()){ ...}- selected 是否选中
- onClick 点击回调
- modifier 修饰符
- enabled 是否可用
- interactionSource 跟下面Button解释统一
- colors 设置色彩 RadioButtonDefaults.colors(selectedColor, unselectedColor,disabledColor)办法有三个参数，第一个selectedColor示意选中时候的色彩，第二个参数unselectedColor示意没有选中时候的色彩，第三个disabledColor示意不可用时候的色彩。
@Preview()@Composablefun iconToggleButtonTest(){ val context = LocalContext.current val interactionSource = remember { MutableInteractionSource() } val pressState = interactionSource.collectIsPressedAsState() var isCheck = remember { mutableStateOf(false) } Column(modifier = Modifier.padding(10.dp,10.dp)) { RadioButton( selected = isCheck.value, onClick = { isCheck.value = !isCheck.value }, modifier = Modifier.size(50.dp), enabled = true, interactionSource = interactionSource, colors = RadioButtonDefaults.colors(selectedColor = Color.Red,unselectedColor = Color.Black,disabledColor = Color.Gray)) }}六：TextButton的用法
TextButton文本按钮，来看看TextButton的代码，其实TextButton就是new了Button。
@Composablefun TextButton( onClick: () -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, elevation: ButtonElevation? = null, shape: Shape = MaterialTheme.shapes.small, border: BorderStroke? = null, colors: ButtonColors = ButtonDefaults.textButtonColors(), contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding, content: @Composable RowScope.() -> Unit) = Button( onClick = onClick, modifier = modifier, enabled = enabled, interactionSource = interactionSource, elevation = elevation, shape = shape, border = border, colors = colors, contentPadding = contentPadding, content = content)- onClick 点击事件
- modifier 修饰符
- enabled 是否可用
- interactionSource 跟Button统一
- elevation 暗影
- shape 形态设置
- border 边框设置
- colors 色彩设置
- contentPadding 内容边距的设置
- content 蕴含的控件
@Preview()@Composablefun textButtonTest(){ val context = LocalContext.current val interactionSource = remember { MutableInteractionSource() } val pressState = interactionSource.collectIsPressedAsState() Column(modifier = Modifier.padding(10.dp,10.dp)) { TextButton( onClick = { Toast.makeText(context,"点击了登录",Toast.LENGTH_SHORT).show() }, modifier = Modifier .size(80.dp, 40.dp) .clip(RoundedCornerShape(20)), enabled = true, interactionSource = interactionSource, elevation = ButtonDefaults.elevation(2.dp,8.dp,0.dp), shape = RoundedCornerShape(20), border = BorderStroke(1.dp, if(pressState.value) Color.Red else Color.Yellow), colors = ButtonDefaults.buttonColors(backgroundColor = Color.Blue,contentColor = Color.White,disabledBackgroundColor = Color.Gray,disabledContentColor = Color.Black), contentPadding = ButtonDefaults.ContentPadding) { Text(text = stringResource(id = R.string.login),fontSize = 14.sp) } }}文末
明天的文章就到这里，感谢您的浏览，有问题能够在评论区留言探讨，期待与大家共同进步。喜爱的话不要忘了三连。大家的反对和认可，是我分享的最大能源。