关于android:Android开发Jetpack-Compose-ButtonIconButton等各种Button的讲解

44次阅读

共计 13758 个字符，预计需要花费 35 分钟才能阅读完成。

前言

本文会解说 Button，IconButton, ExtendedFloatingActionButton, FloatingActionButton,IconToggleButton,OutlinedButton,RadioButton,TextButton 这几个 Button 的用法详解，感兴趣的请往下看

一：Button 的用法

先来看看 Button 的源码(OutlinedButton 跟 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) {...}
  • content 是示意 Button 的内容。比方外面能够是一个 Text

  • onClick 点击的回调

    @Preview()
@Composable
fun 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()
@Composable
fun 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()
@Composable
fun 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()
@Composable
fun 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()
@Composable
fun 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()
@Composable
fun 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()
@Composable
fun 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 的构造方法如下

@Composable
fun 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()
@Composable
fun 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 的构造函数办法如下：

@Composable
fun 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()
@Composable
fun 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 的构造方法如下

@Composable
fun 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()
@Composable
fun 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 能够扭转状态的控件。代码如下：

@Composable
fun 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()
@Composable
fun 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 的代码如下

@Composable
fun 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()
@Composable
fun 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。

@Composable
fun 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()
@Composable
fun 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)
        }
    }
}

文末

明天的文章就到这里，感谢您的浏览，有问题能够在评论区留言探讨，期待与大家共同进步。喜爱的话不要忘了 三连。大家的反对和认可，是我分享的最大能源。

正文完
android
发表至： android
2021-12-10
 0
关于android:Android-开发-3-年被要求转-Flutter-Flutter-真的很香吗
关于android:实战-在-Room-中使用-Flow
关于android:字节谷歌超全Kotlin学习王炸笔记Kotlin入门教程高级Kotlin强化实战附Demo
关于android:在fragment中使用viewpager嵌套fragment