Android：使用Jetpack Compose画渐变背景

系列文章目录

• Android: Jetpack Compose如何禁用涟漪（水波纹）效果
• Android：使用Jetpack Compose 实现Text控件跑马灯效果
• Android：使用Jetpack Compose实现自动轮播Banner
• Android：使用Jetpack Compose画渐变背景
• Android：Jetpack Compose——实用的小技巧

---

---

前言

如上图所示，当UI设计中有渐变背景的控件时，传统方式可以使用xml来画，但是，渐变色最多只能设置3种（即起始颜色，中间颜色，结束颜色），更多的颜色不支持；或者直接美工切图，由于内容长度不固定，可能还需要制作.9.png图片，并设置拉伸区域，麻烦且会比较占用APK大小。现在我们完全可以使用Compose纯Kotlin代码来实现，支持多个色渐变。

---

一、Brush（笔刷）

系统默认提供了五种Brush（笔刷），分别是：horizontalGradient（横向渐变）、verticalGradient（纵向渐变）、linearGradient（线性渐变）、radialGradient（环形渐变）、sweepGradient（扫描渐变）。

1. horizontalGradient（横向渐变）

1.1 仅设置颜色

		Box(
            modifier = Modifier
                .size(100.dp, 40.dp)
                .background(
                    brush = Brush.horizontalGradient(
                        listOf(
                            Color.Red,
                            Color.Green,
                            Color.Blue
                        )
                    )
                )
        )

1.2.平铺模式：Clamp（夹紧）

	Box(
            modifier = Modifier
                .size(100.dp, 40.dp)
                .background(
                    brush = Brush.horizontalGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Green,
                            Color.Blue
                        ),
                        startX = 50f,
                        endX = 150f,
                        tileMode = TileMode.Clamp
                    )
                )
        )

横向渐变
渐变位置（X轴）：50f——150f
平铺模式：Clamp（夹紧）

1.3.平铺模式：Decal（印花）

	Box(
            modifier = Modifier
                .size(100.dp, 40.dp)
                .background(
                    brush = Brush.horizontalGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Green,
                            Color.Blue
                        ),
                        startX = 50f,
                        endX = 150f,
                        tileMode = TileMode.Decal
                    )
                )
        )

横向渐变
渐变位置（X轴）：50f——150f
平铺模式：Decal（印花）

1.4.平铺模式：Mirror（镜面）

Box(
            modifier = Modifier
                .size(100.dp, 40.dp)
                .background(
                    brush = Brush.horizontalGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Green,
                            Color.Blue
                        ),
                        startX = 50f,
                        endX = 150f,
                        tileMode = TileMode.Mirror
                    )
                )
        )

横向渐变
渐变位置（X轴）：50f——150f
平铺模式：Mirror（镜面）

1.5.平铺模式：Repeated（重复）

	Box(
            modifier = Modifier
                .size(100.dp, 40.dp)
                .background(
                    brush = Brush.horizontalGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Green,
                            Color.Blue
                        ),
                        startX = 50f,
                        endX = 150f,
                        tileMode = TileMode.Repeated
                    )
                )
        )

横向渐变
渐变位置（X轴）：50f——150f
平铺模式：Repeated（重复）

2. verticalGradient（纵向渐变）

	Box(
            modifier = Modifier
                .size(40.dp, 100.dp)
                .background(
                    brush = Brush.verticalGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Green,
                            Color.Blue
                        ),
                        startY = 50f,
                        endY = 150f,
                        tileMode = TileMode.Clamp
                    )
                )
        )

纵向渐变
渐变位置（Y轴）：50f——150f
平铺模式：Clamp（夹紧）

3.linearGradient（线性渐变）

3.1.默认是从左上角向右下角渐变

	Box(
            modifier = Modifier
                .size(100.dp, 50.dp)
                .background(
                    brush = Brush.linearGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Green,
                            Color.Blue
                        )
                    )
                )
        )

3.2.设置渐变位置

	Box(
            modifier = Modifier
                .size(100.dp, 50.dp)
                .background(
                    brush = Brush.linearGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Green,
                            Color.Blue
                        ),
                        start = Offset(0f, 0f),
                        end = Offset(100f, 50f)
                    )
                )
        )

线性渐变
起始位置坐标：（0，0）
结束位置坐标：（100，50）

4. radialGradient（环形渐变）

4.1. 默认

	Box(
            modifier = Modifier
                .size(50.dp, 50.dp)
                .background(
                    brush = Brush.radialGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Green,
                            Color.Blue
                        )
                    )
                )
        )

4.2. 设置中心坐标与半径

	Box(
            modifier = Modifier
                .size(50.dp, 50.dp)
                .background(
                    brush = Brush.radialGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Green,
                            Color.Blue
                        ),
                        center = Offset(30f, 30f),
                        radius = 20f
                    )
                )
        )

环形渐变
中心坐标：（30，30）
半径：20

5. sweepGradient（扫描渐变）

5.1.默认

	Box(
            modifier = Modifier
                .size(50.dp, 50.dp)
                .background(
                    brush = Brush.sweepGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Green,
                            Color.Blue
                        )
                    )
                )
        )

5.2. 设置中心坐标

Box(
            modifier = Modifier
                .size(50.dp, 50.dp)
                .background(
                    brush = Brush.sweepGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Green,
                            Color.Blue
                        ),
                        center = Offset(30f, 30f)
                    )
                )
        )

扫描渐变
中心坐标：（30，30）

6.自定义颜色之间的过渡位置

通过传入Pair<Float, Color>类型的多个颜色，还可以控制颜色之间的过渡位置。
例如：

Brush.linearGradient(
     0.0f to Color.Red,
     0.3f to Color.Green,
     1.0f to Color.Blue,
     start = Offset(0.0f, 50.0f),
     end = Offset(0.0f, 100.0f)
)

二、实例：渐变圆角矩形边框

代码如下：

Box(
            modifier = Modifier
                .size(100.dp, 50.dp)
                .border(
                    brush = Brush.linearGradient(
                        colors = listOf(
                            Color.Red,
                            Color.Green,
                            Color.Blue
                        )
                    ),
                    width = 1.dp,
                    shape = RoundedCornerShape(4.dp)
                )
        )

---

总结

以上就是今天要讲的内容，平时使用Compose画控件背景还是非常简单的，基本上用不到xml，这也是Compose的目标，抛弃xml的画布局方式。