代码之家 › 专栏 › 技术社区 › SimonSays

用透明背景合成圆形按钮

android-jetpack-compose kotlin android

SimonSays · 技术社区 · 3 年前

我想展示一个 Button 具有圆角和50%透明的背景。我目前的尝试如下:

MaterialTheme {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = Color.Yellow
    ) {
        Column(modifier = Modifier.padding(10.dp)) {
            Button(
                modifier = Modifier
                    .clip(CircleShape),
                onClick = { },
                colors = ButtonDefaults.buttonColors(backgroundColor = Color.White.copy(alpha = 0.5f))
            ) {
                Text(
                    text = "My Button",
                    textAlign = TextAlign.Center
                )
            }
        }
    }
}

结果不是很好:

看起来问题出在阴影上,但我不确定如何删除它,并在整个形状中显示相同的颜色。

1 回复 | 直到 3 年前

SimonSays 3 年前

结果表明,当删除立面时,阴影将消失。

Button(
    modifier = Modifier
        .clip(CircleShape),
    onClick = { },
    elevation = null,
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.White.copy(alpha = 0.5f))
) { ... }

Richard Onslow Roper 3 年前

按钮只是一个按钮 Surface 包装您提供的内容。你可以查一下来源。所以,我只是稍微调整了一下

@Composable
fun HollowButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
) {
    val contentColor by colors.contentColor(enabled)
    Surface(
        modifier = modifier,
        shape = shape,
        color = colors.backgroundColor(enabled).value.copy(0.5f), //Basically I refactored the alpha modification to here
        contentColor = contentColor.copy(alpha = 1f),
        border = border,
        elevation = elevation?.elevation(enabled, interactionSource)?.value ?: 0.dp,
        onClick = onClick,
        enabled = enabled,
        role = Role.Button,
        interactionSource = interactionSource,
        indication = rememberRipple()
    ) {
        CompositionLocalProvider(LocalContentAlpha provides contentColor.alpha) {
            ProvideTextStyle(
                value = MaterialTheme.typography.button
            ) {
                Row(
                    Modifier
                        .defaultMinSize(
                            minWidth = ButtonDefaults.MinWidth,
                            minHeight = ButtonDefaults.MinHeight
                        )
                        .padding(contentPadding),
                    horizontalArrangement = Arrangement.Center,
                    verticalAlignment = Alignment.CenterVertically,
                    content = content
                )
            }
        }
    }
}

很有魅力。