Jetpack Compose系列教程之(3)——图标(Icon) 按钮(Button)

软件定制开发工作室

已于 2025-02-14 08:57:52 修改

阅读量1.4k

点赞数 23

分类专栏： JetPack Compose系列教程文章标签： android jetpack

于 2025-02-11 09:55:19 首次发布

本文链接：https://blog.csdn.net/heludoit1/article/details/145564212

版权

JetPack Compose系列教程专栏收录该内容

20 篇文章

订阅专栏

5.contentPadding 内容内边距

6.interactionSource 状态变化

7.图标按钮IconButton

8.TextButton

9.OutlinedButton

本篇分别对常用的组件：图标(Icon) 按钮(Button) 输入框(TextField)的使用方法及各参数使用进行讲解，参考了不少文章，且费了不少时间去时间去一一实践，希望对各位带来些帮助 😊

图标Icon使用

Icon接收三种参数,如下图

//第一种就不多说,就是一个drawble对象


//获取图片资源,R.drawble.xx或R.mipmap.xx
Icon(painter = painterResource(id = R.drawable.head1_1024), null)

//自带的图标
Icon(Icons.Filled.Search, null)

Compose内置了几十个常用的图标,我们使用枚举类型即可使用

Icons里面定了5种类型 Outlined Filled Sharp TwoTone Rounded ,可以根据自己的需要选择不同的类型,如填充型(Filled)或者是轮廓型(Outlined)

Icon的构造方法参数简单说明下
contentDescription是给无障碍人使用的文本描述,考虑到一些视觉障碍的人使用,所以有个这个属性,会使用TTS语音播放将contentDescription属性读出来,告知用户此按钮的作用

tint则是图标颜色的设置

Row() {
    Icon(Icons.Outlined.Settings, contentDescription = null, tint = Color.Red)
    Icon(Icons.Filled.Settings, contentDescription = null, tint = Color.Blue)
    Icon(Icons.Sharp.Settings, contentDescription = null, tint = Color.Green)
    Icon(Icons.TwoTone.Settings, contentDescription = null, tint = Color.Red)
    Icon(Icons.Rounded.Settings, contentDescription = null, tint = Color.Black)
}

效果如下图所示

PS:具体的图标名称写的时候会有代码提示

不过默认常用的就那40几个,其他的图标就没有包含在内,当然,如果你想用的话,也有方法实现,需要导入material-icons-extended依赖即可

dependencies {
  ...
  implementation "androidx.compose.material:material-icons-extended:$compose_version"
}

但是全套图标会导致打包后的apk文件过大,所以官方推荐使用导入图标文件的方法,详情可参考官方文档

按钮 Button

Button这个组件,官方已经实现了Material Design的效果,一般来说我们直接使用这个即可

除此之外,官方也是给我们封装了不同类型的Button,分别为IconButton TextButton OutlinedButton IconToggleButton

上面我们刚讲了图标,下面就先讲些图标按钮IconButton的使用方式吧

基本使用

和以往我们使用的按钮不一样,这里的按钮可以看做是一个布局控件,我们需要设置文字也就是往里面添加一个Text组件,这就是compose和传统Android的xml的不同之处

由上面这点,所以我们在代码层面就十分灵活,可以实现各种效果(如带有图标的按钮),下面来个例子

Button(onClick = { println("点击了按钮")}){
    Icon(Icons.Default.Search,contentDescription = null)
    Text(text = "测试")
}

上面的代码实现的效果就是有个图标在左侧

参数讲解

我们先看下Button的定义,其实封装好的方法,代码如下所示

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的content参数(也就是上面lambda),传入多个组件,Button会将其按照水平方式排列(即Button可视为Row布局)

由于kotlin的语法特性,所以我们可以在后面以花括号写个lambda函数

这里先讲下比较简单的参数:

onClick是点击事件.也是接收一个函数
modifier是修饰符,本章先不使用,之后出个篇文章,专门讲解下这个的用法
enabled按钮是否可用(不可用默认是灰色，可用默认是蓝色),当然这里的默认的禁用和可用的颜色可可以调整,详情请见下面的colors参数

接下来就是稍微有点复杂的参数说明了,因为用法与之前原生Button有所区别,这里特别分成一小节讲解,方便目录查阅

1.elevation 阴影

Button的阴影参数是有有默认值的,我们也可以使用下面的方法进行数值的修改

ButtonDefaults.elevation(defaultElevation,pressedElevation,disabledElevation)

defaultElevation表示默认的阴影
pressedElevation表示按下时的阴影
disabledElevation表示未启用时候的阴影

Button(
    enabled = true,
    onClick = { /*TODO*/ },
    elevation = ButtonDefaults.elevation(4.dp, 10.dp, 0.dp)
) {
    Text(text = "阴影按钮")
}

Button(
    enabled = false,
    onClick = { /*TODO*/ },
    elevation = ButtonDefaults.elevation(4.dp, 10.dp, 0.dp)
) {
    Text(text = "禁用状态的阴影按钮")
}

2.shape 形状

Android官方给我们提供了以下四种形状,我从代码提示里只看到有这四种

RoundedCornerShape 圆角形状
CutCornerShape 切角形状
AbsoluteRoundedCornerShape 绝对圆角形状
AbsoluteCutCornerShape 绝对切角形状

这里从字面翻译知道其的意思,但是具体圆角形状和绝对圆角形状有什么区别,实际测试也有,但是没法看出来有什么区别,官方的文档也是解释的有点模糊

后来者如果知道,可以在评论区回复下,感谢~

上面四种类的接收参数其实是一样的,这里就截个图给大家看看

我们常用就是使用dp定位进行设置,如

RoundedCornerShape(10.dp) //设置10dp的圆角
RoundedCornerShape(topStart = 5.dp,topEnd = 6.dp,bottomEnd = 10.dp,bottomStart = 10.dp)

topStart 左上角
topEnd 右上角
bottomStart 左下角
bottomEnd 右下角

Row() {
	//固定长宽一样,圆角设置为50%即为圆形
    Button(
        modifier = Modifier.size(50.dp,50.dp),
        onClick = { /*TODO*/ },
        shape = RoundedCornerShape(50),
    ) {
        Text(text = "")
    }

	//固定长宽一样,切角设置为50%即为菱形
    Button(
        modifier = Modifier.size(50.dp,50.dp),
        onClick = { /*TODO*/ },
        shape = CutCornerShape(50.dp),
    ) {
        Text(text = "")
    }

	//左上角设置圆角
    Button(
        onClick = { /*TODO*/ },
        shape = RoundedCornerShape(topStart = 20.dp),
    ) {
        Text(text = "按钮")
    }

	//圆角设置为50%
    Button(
        onClick = { /*TODO*/ },
        shape = RoundedCornerShape(50),
        border = BorderStroke(1.dp, Color.Green),
        colors = ButtonDefaults.buttonColors(),
    ) {
        Text(text = "按钮111")
    }

    Button(
        modifier = Modifier.size(50.dp,50.dp),
        onClick = { /*TODO*/ },
        shape = CutCornerShape(25),
        border = BorderStroke(1.dp, Color.Green),
        colors = ButtonDefaults.buttonColors(),
    ) {
        Text(text = "按钮111")
    }

}

Modifier.size(50.dp,50.dp)是用来设置宽高的

我们可以实现如下图的效果

3.border 边框

边框就简单了,使用BorderStroke,接收两个参数,一个是边框的宽度,另外一个则是边框的颜色

Button(
    onClick = { /*TODO*/ },
    elevation = ButtonDefaults.elevation(4.dp, 10.dp, 0.dp),
    shape = RoundedCornerShape(topStart = 5.dp,topEnd = 6.dp,bottomEnd = 10.dp,bottomStart = 10.dp),
    border = BorderStroke(1.dp, Color.Green)
) {
    Text(text = "边框按钮")
}

4.colors 颜色

可以通过下面的方法进行颜色的参数的设置

ButtonDefaults.buttonColors(backgroundColor,contentColor,disabledBackgroundColor,disabledContentColor)

backgroundColor表示设置背景颜色
contentColor表示设置内容颜色这里比如说是登录文本的颜色
disabledBackgroundColor表示enable等于false的时候的背景颜色
disabledContentColor表示enable等于false时候的内容的颜色

5.contentPadding 内容内边距

contentPadding参数接收一个PaddingValues对象,这个对象的构造方法如下:

PaddingValues(10.dp) //所有内边距为10dp

PaddingValues(10.dp,20.dp) //左右内边距ge10dp,上下内边距各20dp

PaddingValues(10.dp,15.dp,20.dp,25.dp) //左内边距10dp,上内边距15dp,右内边距20dp,下内边距25dp

6.interactionSource 状态变化

这个主要是用来按钮的状态说明,我们可以使用这个来达到动态切换按钮样式的效果(如按下按钮的样式效果,松开后按钮的样式),类似我们之前常用selector的xml文件给按钮设置样式

可以处理状态的，比如按下的时候什么效果，正常时候什么效果。类似之前再布局文件里写Selector

interactionSource是一个接口,我们需要使用其的实现类MutableInteractionSource

MutableInteractionSource中提供了三个属性用来获取状态

collectIsPressedAsState 按压状态
collectIsDraggedAsState 拖动状态
collectIsFocusedAsState 焦点状态

我们可以可以此状态来动态更改按钮的样式,如下面的代码

@Preview(showBackground = true)
@Composable
fun DefaultPreview2() {

    val myInteractionSource = remember {
        MutableInteractionSource()
    }

    val pressState = myInteractionSource.collectIsPressedAsState()
    //如果是按压状态则是切角形状,否则则是圆角形状
    val myShape = if(pressState.value) CutCornerShape(10.dp) else RoundedCornerShape(10.dp)

    Column(
        Modifier.padding(20.dp)
    ) {
        Button(
            onClick = { /*TODO*/ },
            //设置我们定义的shape
            shape = myShape,
            //设置创建的MutableInteractionSource对象
            interactionSource = myInteractionSource
        ) {
            Text("你好")
        }
    }
}

效果如下(要按住才会变化):

7.图标按钮IconButton

IconButton 可以帮助我们生成一个可点击的图标按钮,点击按钮默认会有水波涟漪的点击效果

IconButton(onClick = { /*TODO*/ }) {
    Icon(Icons.Filled.Search, null)
}

8.TextButton

这个其实是扁平按钮,之前有个FlatButton,然后改名成这个了,用法和Button一样,就是样式有所调整

TextButton(onClick = { /*TODO*/ }) {
    Icon(Icons.Default.Search,contentDescription = null)
    Text(text = "测试")
}

9.OutlinedButton

这个的话,看效果觉得应该是带有边框的按钮,我们也可以根据实际需求改造

OutlinedButton(onClick = { /*TODO*/ }) {
    Text(text = "测试")
}