📦 «Box» در «Jetpack Compose» ساده‌ترین راه برای لایه‌بندی ویجت‌ها روی هم است.
👨‍💻 وقتی می‌خواهید یک متن را روی تصویر بگذارید یا یک دکمه را در گوشه‌ی کارت قرار دهید، «Box» بهترین انتخاب است.
🔍 «Box» یک «Layout» است که فرزندانش را به‌ترتیب روی هم می‌چیند و هر کدام می‌توانند موقعیت متفاوتی داشته باشند.

💡 مثال واقعی: یک کارت با عکس پس‌زمینه و متن روی آن.

کد زیر را ببینید:

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(200.dp)
) {
    Image(
        painter = painterResource(id = R.drawable.background),
        contentDescription = null,
        modifier = Modifier.fillMaxSize(),
        contentScale = ContentScale.Crop
    )
    Text(
        text = "عنوان کارت",
        color = Color.White,
        fontSize = 24.sp,
        modifier = Modifier
            .align(Alignment.BottomCenter)
            .padding(16.dp)
    )
}

✅ در این کد، «Image» تمام فضای «Box» را پر می‌کند و «Text» با استفاده از «align» به پایین و وسط چسبانده شده است.
🎯 «Box» هم‌چنین برای نمایش «CircularProgressIndicator» روی یک محتوا یا قرار دادن نشانگر «Badge» روی آیکون کاربرد دارد.

📌 نکته: از «Modifier.align» برای تعیین موقعیت دقیق هر فرزند استفاده کنید.
🌐 «Box» را به‌عنوان پایه‌ای برای «Stack» در «XML» به خاطر بسپارید.

#Codeit #Android #Kotlin #Jetpack #JetpackCompose #BoxLayout #UI #AndroidDev
🌐 Codeit → https://code-it.ir

━━━━━━━━━━━━━━━
@CodeitMobile