android - Jetpack Compose 中轮廓按钮的透明背景

Question

我想创建只有文本和图标且所有背景和边框都是透明的按钮。我创造了这样的东西:

OutlinedButton(
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent),
    border = BorderStroke(0.dp, Color.Transparent),
    modifier = modifier,
    onClick = onClick
) {
    icon?.invoke()
    Text(
        text = value,
        fontSize = 12.sp
    )
}

一切都很好，但我失去了默认颜色(应该是蓝色，我有黑色图标和文字)。如何从按钮中删除所有背景和边框但仍然有主题颜色？

Answer 1

你能试试这个吗？

@Composable
fun TiledButton(
    onClick: () -> Unit,
    @DrawableRes backgroundDrawableId: Int,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    contentColor: Color = MaterialTheme.colors.primary,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        onClick = onClick,
        contentPadding = PaddingValues(0.dp),
        enabled = enabled,
        shape = shape,
        border = border,
        elevation = null,
        colors = ButtonDefaults.buttonColors(
            backgroundColor = Color.Transparent,
            contentColor = contentColor,
            disabledBackgroundColor = Color.Transparent,
            disabledContentColor = contentColor.copy(alpha = ContentAlpha.disabled),
        ),
        modifier = modifier
    ) {
        Box(
            contentAlignment = Alignment.Center,
        ) {
            TileAndroidImage(
                drawableId = backgroundDrawableId,
                contentDescription = "...",
                modifier = Modifier.matchParentSize()
            )
            Row(
                horizontalArrangement = Arrangement.Center,
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.padding(contentPadding),
                content = content,
            )
        }
    }
}

TiledButton(
    onClick = {  },
    backgroundDrawableId = R.drawable.tile,
    border = BorderStroke(1.dp, Color.Blue),
) {
    Text("Button")
}