gpt4 book ai didi

android - 带有渐变背景的Jetpack Compose按钮?

转载 作者:行者123 更新时间:2023-12-04 12:07:51 48 4
gpt4 key购买 nike

是否可以创建具有渐变背景的按钮?

@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)
)
}
}
将渐变添加到 Textbackground(brush)Button 之间留出余量和 Text .当我使用 modifier.background(brush = horizontalGradientBrush) 设置按钮背景时, Button是用原色绘制的,基本上什么都没有发生。是否可以设置 Button的背景? ,而不是其他组件,具有渐变色?

最佳答案

撰写 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)
)
}
}
结果样本:
enter image description here

关于android - 带有渐变背景的Jetpack Compose按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65542068/

48 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com