在Android Studio中用Jetpack Compose传递图片参数至通用联系人组件

问题背景 #

我正在开发一款「名片」应用，核心功能是展示个人照片，下方以行布局呈现各类联系人信息：每行左侧是对应应用图标（如Instagram），右侧是我的账号信息（如用户名）。

目前我为每个应用写了独立的Composable函数，运行正常，示例代码如下：

@Composable
fun InstagramContactInfo() {
    Row(modifier = Modifier
        .fillMaxWidth()
        .padding(start = 30.dp, end = 30.dp, bottom = 16.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically) {
        Image(
            painter = painterResource(R.drawable.icons8_instagram_48),
            contentDescription = "Instagram Icon",
            modifier = Modifier.size(50.dp)
        )
        Text(
            text = "@username",
            fontFamily = FontFamily.Monospace,
            color = Color.White,
        )
    }
}

但我想封装一个通用的Composable函数，仅接收图标和用户标识两个参数来渲染相同布局。尝试传入资源ID字符串的方式失败，代码如下：

@Composable
fun ContactInfo(icon: String, handle: String) {
    Row(modifier = Modifier
        .fillMaxWidth()
        .padding(start = 30.dp, end = 30.dp, bottom = 16.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically) {
        Image(
            painter = painterResource(R.drawable.${icon}),
            contentDescription = "App Icon",
            modifier = Modifier.size(50.dp)
        )
        Text(
            text = handle,
            fontFamily = FontFamily.Monospace,
            color = Color.White,
        )
    }
}

解决方案 #

1. 传递资源ID（推荐方案）

Android中R.drawable下的资源都是静态int类型，无法通过字符串拼接直接引用。正确做法是直接传递资源ID作为参数，配合@DrawableRes注解做类型校验：

@Composable
fun ContactInfo(
    @DrawableRes iconResId: Int,
    handle: String,
    contentDescription: String = "App Icon"
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 30.dp, end = 30.dp, bottom = 16.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painterResource(id = iconResId),
            contentDescription = contentDescription,
            modifier = Modifier.size(50.dp)
        )
        Text(
            text = handle,
            fontFamily = FontFamily.Monospace,
            color = Color.White
        )
    }
}

调用示例：

// 渲染Instagram联系人行
ContactInfo(
    iconResId = R.drawable.icons8_instagram_48,
    handle = "@username",
    contentDescription = "Instagram Icon"
)

// 渲染其他应用，比如Twitter
ContactInfo(
    iconResId = R.drawable.icons8_twitter_48,
    handle = "@twitter_username",
    contentDescription = "Twitter Icon"
)

2. 直接传递Painter对象（灵活方案）

如果需要支持非本地资源（比如网络图片、自定义Painter），可以直接传递Painter作为参数：

@Composable
fun ContactInfo(
    iconPainter: Painter,
    handle: String,
    contentDescription: String = "App Icon"
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 30.dp, end = 30.dp, bottom = 16.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = iconPainter,
            contentDescription = contentDescription,
            modifier = Modifier.size(50.dp)
        )
        Text(
            text = handle,
            fontFamily = FontFamily.Monospace,
            color = Color.White
        )
    }
}

调用示例（本地资源）：

ContactInfo(
    iconPainter = painterResource(R.drawable.icons8_instagram_48),
    handle = "@username",
    contentDescription = "Instagram Icon"
)

如果是网络图片（使用Coil等库）：

// 需先添加Coil依赖
ContactInfo(
    iconPainter = rememberAsyncImagePainter("https://example.com/instagram-icon.png"),
    handle = "@username",
    contentDescription = "Instagram Icon"
)

3. 字符串转资源ID（不推荐）

如果一定要用字符串传递资源名，可以通过Context获取对应ID，但这种方式容易出错（比如拼写错误、资源不存在），不推荐使用：

@Composable
fun ContactInfo(
    iconName: String,
    handle: String,
    contentDescription: String = "App Icon"
) {
    val context = LocalContext.current
    val iconResId = remember(iconName) {
        context.resources.getIdentifier(
            iconName,
            "drawable",
            context.packageName
        )
    }

    require(iconResId != 0) { "Drawable resource with name $iconName not found" }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(start = 30.dp, end = 30.dp, bottom = 16.dp),
        horizontalArrangement = Arrangement.SpaceBetween,
        verticalAlignment = Alignment.CenterVertically
    ) {
        Image(
            painter = painterResource(id = iconResId),
            contentDescription = contentDescription,
            modifier = Modifier.size(50.dp)
        )
        Text(
            text = handle,
            fontFamily = FontFamily.Monospace,
            color = Color.White
        )
    }
}

调用示例：

ContactInfo(
    iconName = "icons8_instagram_48",
    handle = "@username",
    contentDescription = "Instagram Icon"
)

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