Jetpack Compose可组合函数如何传入icon参数实现组件复用？

你当前代码中icon参数声明为Icon类型，而Image组件的imageVector入参要求接收ImageVector类型，二者类型不匹配，结合复用需求可以参考以下两种实现方案：

方案1：固定传入ImageVector类型（适配现有写法） #

如果你的业务场景中图标都是矢量图标，直接调整参数类型即可适配现有代码：

@Composable
fun LoginMethod(icon: ImageVector, text: String) {
    Row(
        modifier = Modifier
            .padding(8.dp)
            .shadow(
                elevation = 6.dp,
                shape = RoundedCornerShape(6.dp)
            )
            .padding(horizontal = 16.dp, vertical = 8.dp), // 增加内边距避免内容贴边
        verticalAlignment = Alignment.CenterVertically // 图标和文字垂直居中
    ) {
        Image(
            imageVector = icon,
            contentDescription = null,
            modifier = Modifier.size(24.dp) // 统一图标尺寸
        )
        Spacer(modifier = Modifier.width(8.dp)) // Row布局用width设置水平间距
        Text(text = text)
    }
}

调用示例：

// 直接传入Material图标库的矢量图标即可
LoginMethod(icon = Icons.Default.Google, text = "谷歌账号登录")

方案2：传入可组合图标槽位（更通用的复用方案） #

如果需要支持任意类型的图标（本地位图、网络加载图标、带自定义样式的图标等），推荐用Composable槽位的方式实现，完全不限制图标实现形式，复用性更高：

@Composable
fun LoginMethod(
    text: String,
    icon: @Composable () -> Unit // 图标槽位参数
) {
    Row(
        modifier = Modifier
            .padding(8.dp)
            .shadow(
                elevation = 6.dp,
                shape = RoundedCornerShape(6.dp)
            )
            .padding(horizontal = 16.dp, vertical = 8.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        icon() // 直接调用传入的图标组件
        Spacer(modifier = Modifier.width(8.dp))
        Text(text = text)
    }
}

调用示例：

// 可以传入任意自定义图标实现
LoginMethod(text = "手机号登录") {
    Icon(Icons.Default.Phone, contentDescription = null, tint = Color.Blue, modifier = Modifier.size(24.dp))
}

// 也可以传入本地drawable资源图标
LoginMethod(text = "微信登录") {
    Image(
        painter = painterResource(id = R.drawable.ic_wechat),
        contentDescription = null,
        modifier = Modifier.size(24.dp)
    )
}

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