گرادینت‌ ها (یا همون رنگ‌های ترکیبی) یه راه عالی‌ان واسه اینکه به رابط کاربری‌مون عمق و جذابیت بدیم. تو Jetpack Compose خیلی راحت می‌تونیم این افکت رو با استفاده از Brush پیاده کنیم. تو این مقاله قراره یاد بگیریم چطور گرادینت‌های خطی، شعاعی و چرخشی درست کنیم، اونم به سبک معمول Compose، درست مثل کاری که تو هر پروژه‌ای ممکنه بکنیم.

 استفاده از Modifier همراه با background(brush)

ساده‌ترین راه استفاده از گرادینت اینه که از Modifier.background به همراه یه Brush استفاده کنیم. اینجوریه که انجامش می‌دیم:

اگه اطلاعاتی در مورد Modifier نداری میتونی از این جا بخونی : Modifier ها در کامپوز

🌈 گرادینت خطی

@Composable
fun LinearGradientBox() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                brush = Brush.linearGradient(
                    colors = listOf(Color(0xFF00BCD4), Color(0xFF8BC34A)),
                    start = Offset(0f, 0f),
                    end = Offset(1000f, 1000f) // Adjust as needed
                )
            )
    )
}

📘 نکته: با استفاده از پارامترهای start و end می‌تونی جهت گرادینت رو کنترل کنی.

🌌 gradient شعاعی

@Composable
fun RadialGradientBox() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                brush = Brush.radialGradient(
                    colors = listOf(Color.Magenta, Color.Transparent),
                    center = Offset(500f, 500f),
                    radius = 700f
                )
            )
    )
}

🔍 این نوع gradient برای افکت‌هایی مثل نورافکن یا ریپل خیلی کاربرد داره.

🌀 gradient چرخشی (Angular)

@Composable
fun SweepGradientBox() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(
                brush = Brush.sweepGradient(
                    colors = listOf(Color.Red, Color.Yellow, Color.Green, Color.Blue, Color.Red),
                    center = Offset(500f, 500f)
                )
            )
    )
}

🧭 این یکی یه گرادینت دایره‌ایه که حالت چرخشی داره — عالی واسه چیزایی مثل لودینگ اسپینرها یا بک‌گراندهای خاص و چشم‌گیر.

💡 نکته اضافه: استفاده با شکل‌ها
می‌تونی gradient رو روی شکل‌های خاص مثل دایره یا مستطیل گوشه‌گرد هم بندازی:

@Composable
fun GradientCircle() {
    Box(
        modifier = Modifier
            .size(200.dp)
            .background(
                brush = Brush.linearGradient(
                    listOf(Color.Cyan, Color.Blue)
                ),
                shape = CircleShape
            )
    )
}

📦 می‌خوای بندازیش تو Column یا LazyColumn؟

هیچ مشکلی نیست — گرادینت تو هر لای‌آوتی جواب می‌ده.

@Composable
fun GradientScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Brush.verticalGradient(listOf(Color.Black, Color.Gray)))
            .padding(16.dp)
    ) {
        Text("Hello Gradient", color = Color.White)
        Spacer(modifier = Modifier.height(16.dp))
        LinearGradientBox()
    }
}

🧪 پیش‌نمایش

@Preview(showBackground = true)
@Composable
fun GradientPreview() {
    GradientScreen()
}

 حرف آخر
Jetpack Compose کاری کرده که استفاده از گرادینت‌ها مثل بقیه چیزها تمیز و کامپوزابل باشه. چه بخوای یه افکت ملایم رنگی درست کنی، چه یه پس‌زمینه جسور و انیمیشنی، با Brush.linearGradient و Brush.radialGradient و Brush.sweepGradient می‌تونی هرچی لازم داری رو بسازی.

بذار رابط کاربری‌ت با رنگ بدرخشه! 🌈