Android开发：Jetpack Compose Button,IconButton等各种Button的讲解

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

要如何成为Android架构师？

搭建自己的知识框架，全面提升自己的技术体系，并且往底层源码方向深入钻研。
大多数技术人喜欢用思维脑图来构建自己的知识体系，一目了然。这里给大家分享一份大厂主流的Android架构师技术体系，可以用来搭建自己的知识框架，或者查漏补缺；

对应这份技术大纲，我也整理了一套Android高级架构师完整系列的视频教程，主要针对3-5年Android开发经验以上，需要往高级架构师层次学习提升的同学，希望能帮你突破瓶颈，跳槽进大厂；

最后我必须强调几点：

1.搭建知识框架可不是说你整理好要学习的知识顺序，然后看一遍理解了能复制粘贴就够了，大多都是需要你自己读懂源码和原理，能自己手写出来的。
2.学习的时候你一定要多看多练几遍，把知识才吃透，还要记笔记，这些很重要！ 最后你达到什么水平取决你消化了多少知识
3.最终你的知识框架应该是一个完善的，兼顾广度和深度的技术体系。然后经过多次项目实战积累经验，你才能达到高级架构师的层次。

你只需要按照在这个大的框架去填充自己，年薪40W一定不是终点，技术无止境

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

架，全面提升自己的技术体系，并且往底层源码方向深入钻研。
大多数技术人喜欢用思维脑图来构建自己的知识体系，一目了然。这里给大家分享一份大厂主流的Android架构师技术体系，可以用来搭建自己的知识框架，或者查漏补缺；
[外链图片转存中…(img-pKK9DYRu-1714206527994)]

对应这份技术大纲，我也整理了一套Android高级架构师完整系列的视频教程，主要针对3-5年Android开发经验以上，需要往高级架构师层次学习提升的同学，希望能帮你突破瓶颈，跳槽进大厂；

最后我必须强调几点：

1.搭建知识框架可不是说你整理好要学习的知识顺序，然后看一遍理解了能复制粘贴就够了，大多都是需要你自己读懂源码和原理，能自己手写出来的。
2.学习的时候你一定要多看多练几遍，把知识才吃透，还要记笔记，这些很重要！ 最后你达到什么水平取决你消化了多少知识
3.最终你的知识框架应该是一个完善的，兼顾广度和深度的技术体系。然后经过多次项目实战积累经验，你才能达到高级架构师的层次。

你只需要按照在这个大的框架去填充自己，年薪40W一定不是终点，技术无止境

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！