是否可以创建渐变背景的按钮?
@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)
)
}
}
用background(brush)
给Text
添加渐变,会在Button
和Text
之间留下一个空白,当我用modifier.background(brush = horizontalGradientBrush)
设置按钮的背景时,Button
是用原色绘制的,基本上没有什么React,是否可以用渐变色设置Button
的背景,而不是其他组件的背景?
8条答案
按热度按时间vxf3dgd41#
组成1.0.0-α 10
你可以这样做:
使用示例:
结果样品:
but5z9lq2#
实际上,你不需要这个按钮...你可以用一个简单的
Text
...gwo2fgha3#
Jetpack Compose在创建按钮或任何其他组件方面非常灵活,基本上
Button
是Surface
中的Row
,内容填充为因此,可以将padding设置为0,并在为
Text
设置渐变背景后设置padding,如下面的代码片段所示。ma8fv8wu4#
最灵活的方法是将
TextButton
与Modifier.drawBehind()
一起使用。TextButton
本身不绘制任何背景,但行为类似于按钮。Modifier.drawBehind()
使您可以完全控制要绘制的内容:梯度、几何形状等。oipij1gg5#
基于默认按钮的实现,可与其所有参数和自定义选项组合。
Example screenshot with and without Modifier.fillMaxWidth
v64noz0r6#
梯度按钮文件如下所示:
主活动.kt文件
颜色.kt文件
输出:
7xzttuei7#
我创建了一个方框作为可点击元素的背景。然后添加修饰符。background到它,用brush+水平渐变作为参数。
tquggr8v8#
对于来自Material3的按钮,这对我很有效: