这一节主要了解一下Compose中Brush,在Jetpack Compose里,Brush是一个重要的 API,它用于定义填充图形的颜色渐变或图案,能够为界面元素添加丰富的视觉效果。简单总结如下:
1 常见场景
填充形状(圆形、矩形等)
创建渐变效果
实现纹理或图案
组合多个 Brush
2. 常用 Brush 类型
2.1 纯色填充(SolidColor)
// 直接使用Color作为Brush
drawCircle(color = Color.Red)
// 或显式创建SolidColor Brush
val brush = SolidColor(Color.Blue)
drawRect(brush = brush)
2.2 线性渐变(LinearGradientBrush)
val brush = LinearGradientBrush(
colors = listOf(Color.Red, Color.Blue),
start = Offset(0f, 0f),
end = Offset(size.width, size.height)
)
drawRect(brush = brush)
2.3 径向渐变(RadialGradientBrush)
val brush = RadialGradientBrush(
colors = listOf(Color.Yellow, Color.Transparent),
center = Offset(size.width / 2, size.height / 2),
radius = size.minDimension / 2 // 半径
)
drawCircle(brush = brush, radius = size.minDimension / 2)
2.4 扫描渐变(SweepGradientBrush)
val brush = SweepGradientBrush(
colors = listOf(Color.Red, Color.Green, Color.Blue),
center = Offset(size.width / 2, size.height / 2)
)
drawCircle(brush = brush, radius = size.minDimension / 2)
2.5 图像 Brush(ImageBrush)
val imageBitmap = painterResource(id = R.drawable.example).asImageBitmap()
val brush = ImageBrush(
image = imageBitmap,
contentScale = ContentScale.Crop
)
drawRect(brush = brush)
栗子:
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch
@Composable
fun GradientExample() {
val gradientOffset = remember { Animatable(0f) }
LaunchedEffect(Unit) {
launch {
gradientOffset.animateTo(
targetValue = 100f,
animationSpec = infiniteRepeatable(
animation = tween(
durationMillis = 2000,
easing = FastOutSlowInEasing
)
)
)
}
}
val dynamicGradient = Brush.linearGradient(
colors = listOf(Color.Red, Color.Yellow),
start = androidx.compose.ui.geometry.Offset(0f, 0f),
end = androidx.compose.ui.geometry.Offset(gradientOffset.value, gradientOffset.value)
)
Box(
modifier = Modifier
.size(100.dp)
.background(brush = dynamicGradient)
)
}
import androidx.compose.animation.core.*
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import kotlin.math.cos
import kotlin.math.sin
@Composable
fun RainbowGradient() {
val angle by animateFloatAsState(
targetValue = 360f,
animationSpec = infiniteRepeatable(
tween(5000, easing = LinearEasing)
)
)
val colors = listOf(
Color(0xFFFF0000), // 红
Color(0xFFFF7F00), // 橙
Color(0xFFFFFF00), // 黄
Color(0xFF00FF00), // 绿
Color(0xFF0000FF), // 蓝
Color(0xFF4B0082), // 靛
Color(0xFF9400D3) // 紫
)
Canvas(modifier = Modifier.fillMaxSize()) {
val radians = angle * (Math.PI / 180).toFloat()
val width = size.width
val height = size.height
val start = Offset(
x = width / 2 + width / 2 * cos(radians),
y = height / 2 + height / 2 * sin(radians)
)
val end = Offset(
x = width / 2 - width / 2 * cos(radians),
y = height / 2 - height / 2 * sin(radians)
)
drawRect(
brush = Brush.linearGradient(
colors = colors,
start = start,
end = end,
tileMode = androidx.compose.ui.graphics.TileMode.Mirror
)
)
}
}
注意:
1 避免重复创建 Brush 实例:每次重组都创建新的Brush会导致不必要的内存分配和GC压力。使用remember缓存 Brush:
val gradientBrush = remember {
LinearGradientBrush(
colors = listOf(Color.Red, Color.Blue),
start = Offset.Zero,
end = Offset(size.width, size.height)
)
}
2 优先使用内置Brush工厂方法直接调用Brush.linearGradient()等方法,避免手动创建子类:
val brush = Brush.linearGradient(colors = listOf(...))
// 不推荐
val brush = LinearGradientBrush(...)
3 对静态内容使用drawWithCache,缓存复杂Brush计算结果,避免重复绘制:
Modifier.drawWithCache {
val cachedBrush = createComplexBrush()
onDraw { drawRect(brush = cachedBrush) }
}