android compose Brush 渐变和着色器 使用

android compose Brush 渐变和着色器 使用

Compose 中的 Brush 用于描述内容在屏幕上的绘制方式：它 可以确定要在绘制区域（即圆形、 方形、路径）中绘制的颜色。有一些内置 Brush 对绘制非常有用，例如 LinearGradient、RadialGradient 或普通的 SolidColor Brush。

Brush 可与 Modifier.background()、TextStyle 或 DrawScope 绘制调用搭配使用，以将绘制样式应用于要绘制的内容。

package com.wn.androidcomposedemo1.basegoogleimage

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.requiredSize
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Canvas
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.graphics.ImageShader
import androidx.compose.ui.graphics.ShaderBrush
import androidx.compose.ui.graphics.TileMode
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.wn.androidcomposedemo1.R
import com.wn.androidcomposedemo1.ui.theme.AndroidComposeDemo1Theme

/**
 * Author : wn
 * Email : maoning20080808@163.com
 * Date : 2026/7/3 20:02
 * Description : 渐变和着色器
 */
class BrushActivity : ComponentActivity(){

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            AndroidComposeDemo1Theme() {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    BrushExample()
                }
            }
        }
    }

    @Composable
    fun BrushExample(){
        Column(
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Spacer(Modifier.height(20.dp))
            Text("Brush渐变和着色器使用", fontSize = 30.sp, color = Color.Red)
            Row() {
                BrushCircleExample()
                RadialGradientExample()
            }
            Row() {
                CustomColorExample()
                Spacer(Modifier.width(10.dp))
                TileModeExample()
            }

            BrushImage()
        }
    }

    //圆形着色器
    @Composable
    fun BrushCircleExample(){
        val brush = Brush.horizontalGradient(listOf(Color.Red, Color.Blue))
        Canvas(
            modifier = Modifier.size(200.dp),
            onDraw = {
              drawCircle(brush)
            })
    }

    //径向着色器
    @Composable
    fun RadialGradientExample(){
        val brush = Brush.radialGradient(listOf(Color.Red, Color.Blue))
        Canvas(
            modifier = Modifier.size(200.dp),
            onDraw = {
                drawCircle(brush)
            })
    }

    //自定义颜色
    @Composable
    fun CustomColorExample(){
        val colorStops = arrayOf(
            0.0f to Color.Yellow,
            0.2f to Color.Red,
            1f to Color.Blue
        )

        Box(
            modifier = Modifier.requiredSize(200.dp)
                .background(Brush.horizontalGradient(colorStops = colorStops))
        )
    }

    //重复图案
    @Composable
    fun TileModeExample(){
        val listColors = listOf(Color.Yellow, Color.Red, Color.Blue)
        val tileSize = with(LocalDensity.current){
            50.dp.toPx()
        }

        Box(
            modifier = Modifier.requiredSize(200.dp)
                .background(
                    Brush.horizontalGradient(listColors,
                        endX = tileSize,
                        tileMode = TileMode.Repeated
                        )
                )
        )
    }

    @Composable
    fun BrushImage(){
        val imageBrush = ShaderBrush(ImageShader(ImageBitmap.imageResource(id = R.drawable.dog)))

        Text("Hello Compose!",
                style = TextStyle(
                    brush = imageBrush,
                    fontWeight = FontWeight.ExtraBold,
                    fontSize = 36.sp
                )
            )

        Canvas(
            onDraw = {
                drawCircle(imageBrush)
            }, modifier = Modifier.size(200.dp)
        )
    }

}