我有一个向量图像,我想放在一个按钮上.不幸的是,我的图像显示为白色背景.如何用按钮的 colored颜色 填充背景?

button with arrow

这是按钮的代码.

@Composable
fun UserEducationPrimaryButton(
primaryButtonText: String,
primaryButtonClick: (() -> Unit)?,
showButtonArrow: Boolean
) {
val displayUtils = get<DisplayUtils>()
val configuration = LocalConfiguration.current
val screenWidth = displayUtils.convertDpToPixels(configuration.screenWidthDp * 1.0f)
val dpSize = DpSize(width = Dp(screenWidth.toFloat()), height = 52.dp)
// Use the state to change our UI
val interactionSource = remember { MutableInteractionSource() }
val isPressed by interactionSource.collectIsPressedAsState()
val color = if (!isPressed) MaterialTheme.colors.secondary else Color.LightGray
val paddingValues = PaddingValues(horizontal = 32.dp, vertical = 10.dp)

//primary button
Button(
    onClick = primaryButtonClick ?: {},
    modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 24.dp)
        .size(dpSize),
    shape = RoundedCornerShape(ROUNDED_CORNER_SHAPE_BUTTON),
    interactionSource = interactionSource,
    colors = ButtonDefaults.buttonColors(backgroundColor = color),
    contentPadding = paddingValues
) {
    Text(
        modifier = Modifier,
        textAlign = TextAlign.Center,
        text = primaryButtonText,
        style = TextStyle(
            color = MaterialTheme.colors.onPrimary,
            fontWeight = FontWeight.Bold,
            fontSize = 17.sp
        )
    )
    if (showButtonArrow) {
        Spacer(modifier = Modifier.width(16.dp))
        Surface (modifier = Modifier.fillMaxSize(),
        color = color){
            Image(
                painter = rememberImagePainter(
                    ImageRequest.Builder(LocalContext.current)
                        .data(R.drawable.ic_user_education_arrow)
                        .build()
                ),
                contentScale = ContentScale.Fit,
                contentDescription = null,
                modifier = Modifier,
                colorFilter = ColorFilter.tint(
                    MaterialTheme.colors.onSecondary,
                    BlendMode.ColorBurn
                ),
            )
        }

    }
}
}

推荐答案

你可以用Modifier.background.

类似于:

Icon(
    painterResource(id = R.drawable.ic_xxxxx),
    contentDescription = "content description",
    modifier = Modifier.background(MaterialTheme.colors.primary),
    tint = White
)

或者如果你更喜欢Image:

Image(
    painter = rememberAsyncImagePainter(
        ImageRequest.Builder(LocalContext.current)
            .data(R.drawable.ic_xxxxx)
            .build()
    ),
    contentScale = ContentScale.Fit,
    contentDescription = "content description",
    modifier = Modifier.background(MaterialTheme.colors.primary)
)

enter image description here

Android相关问答推荐

如何完全隐藏的元素堆叠在CardView?

fillMaxHeight中的分数在列内不起作用(android jetpack compose)

即使安装了Chrome和YouTube,Android对action_view a YouTube URL的意图也是空的

Android 14无法删除已配置的文件

在一列中垂直对齐两个框

更改活动(上下文)对接收到的uri的访问权限的影响?

使用 JNI 从 Android 应用程序中使用 Kotlin/Native 预构建共享库

在 kotlin 中动态添加 GridView

Electric Eel 后 Gradle 项目同步失败 | 2022.1.1更新

为什么项目捕获对象给我在 Compose 中找不到参考

组成不重叠的元素

单击过go 的文章时 NewsApp 崩溃

错误:构建 react-native 应用程序时包 com.facebook.react.bridge 不存在

Compose `Icons.Outlined.Star` 没有概述

为什么我不能直接记住 mutableStateOf 可组合函数?

无法为:app@debug/compileClasspath解析依赖项com.github.dhaval2404:imagepicker-support:1.7.1

Kotlin:如何在另一个变量的名称中插入一个变量的值

Jetpack 组合和片段

多个项目 react-native android 构建错误

无法再查看 Jetpack Compose 预览.无法实例化一个或多个类 (ComposeViewAdapter)