Jetpack Compose/Kotlin：自定义按钮添加图片的问题及解决方法

一、参数报错的原因 #

你用Image作为参数类型是错误的——Image是Composable组件，不是资源引用类型，没法直接传入R.drawable.xxx。正确的参数类型应该是Int（接收drawable资源ID）或Painter。

二、不通过参数插入图片的方法 #

如果不想把图片作为参数传入，直接在DefaultButton内部固定加载目标图片即可，以下是两种实现方式：

方式1：用Image加载本地位图/矢量图 #

@Composable
fun DefaultButton(
    text: String,
    onClick: () -> Unit
) {
    Spacer(modifier = Modifier.height(5.dp))
    Button(
        onClick = onClick,
        modifier = Modifier.size(width = 200.dp, height = 70.dp)
    ) {
        // 内部直接加载固定图片
        Image(
            painter = painterResource(id = R.drawable.your_target_image),
            contentDescription = "按钮辅助图标", // 无障碍描述必须填写
            modifier = Modifier.size(30.dp)
        )
        Spacer(modifier = Modifier.width(8.dp)) // 图片与文字间添加间距
        Text(text, fontSize = 40.sp)
    }
}

方式2：用Icon加载矢量图标 #

如果你的图片是矢量图标（比如ic_xxx.xml格式），推荐用Icon组件，它会自动适配主题样式：

@Composable
fun DefaultButton(
    text: String,
    onClick: () -> Unit
) {
    Spacer(modifier = Modifier.height(5.dp))
    Button(
        onClick = onClick,
        modifier = Modifier.size(width = 200.dp, height = 70.dp)
    ) {
        Icon(
            painter = painterResource(id = R.drawable.ic_favourites),
            contentDescription = "收藏按钮图标",
            modifier = Modifier.size(30.dp)
        )
        Spacer(modifier = Modifier.width(8.dp))
        Text(text, fontSize = 40.sp)
    }
}

三、Image与Icon的核心区别 #

• Image：通用图片加载组件，支持位图（png/jpg）、矢量图、网络图片等所有图片类型，功能全面，适合展示各类视觉内容（如头像、商品图）。
• Icon：专为功能性图标设计，默认继承当前主题的图标颜色（比如按钮的文字颜色），尺寸通常更小，风格更统一，适合作为按钮、导航栏里的操作类图标。

如果是按钮内的功能性图标，优先用Icon；如果是展示性图片，选择Image。

内容的提问来源于stack exchange，提问作者Vanessa Lau