Compose笔记(二十五)--Brush

        这一节主要了解一下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) }
}