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

一切都正常，但我失去了默认颜色（应该是蓝色，但我有黑色的图标和文本）。我如何从按钮中删除所有背景和边框，但仍然保留主题颜色？

- edi233

---

只需使用 TextButton。 - Gabriele Mariotti

Answer 1

使用TextButton代替OutlinedButton即可:

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

如果您想使用OutlinedButton，只需使用ButtonDefaults.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
    )
}

- Gabriele Mariotti

---

这个方案比原先同意的那个更好。 - SoftwareGuy

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

- Partha