带有渐变背景的 Jetpack Compose 按钮​​？

Question

是否可以创建带有渐变背景的按钮？

@Composable
fun GradientButtonExample() {

    val horizontalGradientBrush = Brush.horizontalGradient(
        colors = listOf(
            Color(0xffF57F17),
            Color(0xffFFEE58),
            Color(0xffFFF9C4)
        )
    )


    val verticalGradientBrush = Brush.verticalGradient(
        colors = listOf(
            Color(0xff4E342E),
            Color(0xff8D6E63),
            Color(0xffD7CCC8)
        )
    )

    Button(onClick = {}) {
        Text(
            text = "Horizontal Gradient",
            modifier = Modifier
                .background(brush = horizontalGradientBrush)
        )
    }

    Button(onClick = {}) {
        Text(
            text = "Vertical Gradient",
            modifier = Modifier
                .background(brush = verticalGradientBrush)
        )
    }
}

向Textwith添加渐变会background(brush)在Button和之间留出边距Text。当我用modifier.background(brush = horizontalGradientBrush),设置按钮的背景时，Button用原色绘制，基本上没有任何反应。是否可以Button使用渐变颜色设置 的背景，而不是其他组件？

Answer 1

撰写1.0.0-alpha10

你可以这样做：

@Composable
fun GradientButton(
    text: String,
    gradient : Brush,
    modifier: Modifier = Modifier,
    onClick: () -> Unit = { },
) {
    Button(
        modifier = modifier,
        colors = ButtonDefaults.buttonColors(backgroundColor = Color.Transparent),
        contentPadding = PaddingValues(),
        onClick = { onClick() },
    ) {
        Box(
            modifier = Modifier
                .background(gradient)
                .then(modifier),
            contentAlignment = Alignment.Center,
        ) {
            Text(text = text)
        }
    }
}

使用示例：

@Composable
private fun Content() {

val gradient =
    Brush.horizontalGradient(listOf(Color(0xFF28D8A3), Color(0xFF00BEB2)))

    Column {
        GradientButton(
            text = "Gradient Button - Max Width",
            gradient = gradient,
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 8.dp)
        )
        GradientButton(
            text = "Gradient Button - Wrap Width",
            gradient = gradient,
            modifier = Modifier
                .wrapContentWidth()
                .padding(horizontal = 16.dp, vertical = 8.dp)
        )
    }
}

结果样本：

Answer 2

实际上，您不需要按钮...您可以使用简单的方法来实现此结果Text...

Text(
    text = "Click Me",
    style = TextStyle(color = Color.White),
    modifier = Modifier
        .clickable(onClick = {})
        .background(
            Brush.verticalGradient(
                colors = listOf(
                    Color.Blue,
                    Color.Green
                )
            ),
            shape = RoundedCornerShape(4.dp)
        )
        .padding(horizontal = 16.dp, vertical = 8.dp),
)

Answer 3

Jetpack Compose 在创建 Button 或任何其他组件方面非常灵活，基本上Button是在内容填充的Row内部Surface

private val ButtonHorizontalPadding = 16.dp
private val ButtonVerticalPadding = 8.dp

因此，可以将填充设置为 0，并在设置渐变背景后设置填充，Text如下面的代码片段所示。

Button(contentPadding = PaddingValues(0.dp), onClick = {}) {
    Text(
        text = "Vertical Gradient",
        modifier = Modifier
            .preferredHeight(ButtonDefaults.MinHeight)
            .align(Alignment.CenterVertically)
            .background(brush = verticalGradientBrush)
            .padding(8.dp)
    )
}