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

只需使用 aTextButton代替 a OutlinedButton：

TextButton(
    onClick = {  }
) {
    Icon(Icons.Default.Add,"")
    Text(
        text = value,
        fontSize = 12.sp
    )
}

如果您想使用OutlinedButtonjust useButtonDefaults.outlinedButtonColors而不是ButtonDefaults.buttonColors：

OutlinedButton(
    colors = ButtonDefaults.outlinedButtonColors(backgroundColor = Color.Transparent),
    border = BorderStroke(0.dp, Color.Transparent),
    modifier = modifier,
    onClick = onClick
) {
    Icon(Icons.Default.Add,"")
    Text(
        text = value,
        fontSize = 12.sp
    )
}

Answer 2

你能试试这个吗？

@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")
}