Jetpack Compose——Icon(图标)的使用

最新推荐文章于 2026-05-03 08:40:44 发布

原创最新推荐文章于 2026-05-03 08:40:44 发布 · 8.0k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Compose #Jetpack #Compose的Icon

Compose 同时被 2 个专栏收录

19 篇文章

订阅专栏

Compose学习

11 篇文章

订阅专栏

本文详细介绍了在Jetpack Compose中如何获取和使用各种资源，包括字符串、颜色、尺寸和图片。对于图标资源，文章讲解了Icon的contentDescription属性和tint设置，并展示了如何使用内置图标以及自定义图片。还特别提到了当图片显示异常时，如何通过设置tint为Color.Unspecified来解决问题。

Compose获取资源方式：

文本 -> stringResource(R.string.hello_world)
颜色 -> colorResource(R.color.black)
尺寸 -> dimensionResource(R.dimen.padding)
图片 -> painterResource(R.drawable.head_icon)

Icon：

首先看看Icon的接收参数类型：

contentDescription：是给无障碍人使用的文本描述,考虑到一些视觉障碍的人使用,所以有个这个属性,会使用TTS语音播放将contentDescription属性读出来,告知用户此按钮的作用
tint：设置图标颜色

ImageBitmap这个就不用说了吧，这里主要用一下Painter和ImageVector

ImageVector：Compose内置了几十个常用的图标，Icons里面定了5种类型Outlined、Filled、Sharp、TwoTone、Rounded,可以根据自己的需要选择不同的类型,如填充型(Filled)或者是轮廓型(Outlined)

        //使用自带图标，默认的就四十几个图标
        Row {
            Icon(Icons.Outlined.Favorite, contentDescription = null, tint = Color.Red)
            Icon(Icons.Filled.Favorite, contentDescription = null, tint = Color.Blue)
            Icon(Icons.Sharp.Favorite, contentDescription = null, tint = Color.Green)
            Icon(Icons.TwoTone.Favorite, contentDescription = null, tint = Color.Red)
            Icon(Icons.Rounded.Favorite, contentDescription = null, tint = Color.Black)
        }

效果如图：

Painter：

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

效果如图：

Icon加载资源图片显示黑色没有加载出图片？别慌，因为默认的tint模式是AmbientContentColor.current，我们需要去掉它默认的着色模式，所以需要将tint的属性设置为Color.Unspecified

//获取图片资源，R.drawable.xx或者R.mipmap.xx
Icon(painter = painterResource(id = R.mipmap.head_icon), null, tint = Color.Unspecified)

此时图片的显示效果就正常了