Jetpack Compose در توسعه موبایل: چیست، مفاهیم کلیدی و چگونه کار می‌کند

مبانی Jetpack Compose (@Composable, Composition, Recomposition)

@Composable — حاشیه‌نویسی که تابع را به Composable تبدیل می‌کند. توابع Composable بلوک‌های ساختمانی UI هستند. آنها View برنمی‌گردانند، بلکه عناصر را به Composition منتشر می‌کنند. Composition — درخت UI ساخته شده از فراخوانی توابع Composable. Compose درخت جدید را با درخت قدیمی مقایسه می‌کند و فقط قسمت‌های تغییر یافته را به‌روزرسانی می‌کند.

Recomposition

Recomposition — راه‌اندازی مجدد توابع Composable هنگام تغییر وضعیت. Compose ردیابی می‌کند که چه وضعیت‌هایی در هر تابع خوانده می‌شود. وقتی وضعیتی تغییر می‌کند، Compose فقط توابعی را که آن وضعیت را می‌خوانند راه‌اندازی مجدد می‌کند (Smart Recomposition). Recomposition خوش‌بینانه است: ممکن است چندین بار اجرا شود، بنابراین توابع باید خالص باشند (بدون عوارض جانبی). عوارض جانبی در LaunchedEffect یا DisposableEffect قرار می‌گیرند. توابع Composable نمی‌توانند suspend باشند. آنها از توابع Composable دیگر فراخوانی می‌شوند. ترتیب فراخوانی تضمین نشده است (Compose ممکن است مرتب‌سازی مجدد کند).

// مثال Composable با State Hoisting و LazyColumn
@Composable
fun ItemList(
    items: List<String>,
    onItemClick: (String) -> Unit
) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(items) { item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable { onItemClick(item) }
                    .padding(8.dp)
            ) {
                Text(
                    text = item,
                    style = MaterialTheme.typography.bodyLarge
                )
            }
        }
    }
}

@Composable
fun MainScreen() {
    var text by remember { mutableStateOf("") }
    val items = listOf("Item 1", "Item 2", "Item 3")

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Compose App") })
        }
    ) { padding ->
        ItemList(
            items = items,
            onItemClick = { selected -> text = selected }
        )
    }
}

Composition — درخت اعلانی. Recomposition — راه‌اندازی مجدد هوشمند. IT Sectr توصیه می‌کند پایداری نوع را نظارت کنید — انواع ناپایدار باعث بازترکیب بیش از حد می‌شوند.

CompositionLocal

CompositionLocal — انتقال ضمنی داده در Compose. مشابه @Environment در SwiftUI. CompositionLocalProvider — تنظیم مقدار. current — خواندن. استفاده شده برای: Theme (MaterialTheme), ContentScale, Density. CompositionLocal ایستا — برای پیکربندی بدون تغییر. CompositionLocal پویا — برای مقادیر قابل تغییر (تم‌ها). IT Sectr استفاده از CompositionLocal برای پیکربندی‌های سراسری و پارامترهای صریح برای داده‌ها را توصیه می‌کند.

وضعیت (remember, mutableStateOf, State Hoisting)

remember — مقدار را بین بازترکیب‌ها حفظ می‌کند. mutableStateOf — وضعیت قابل مشاهده ایجاد می‌کند (MutableState<T>). هنگام تغییر، بازترکیب را فعال می‌کند. State Hoisting — الگو: وضعیت به کامپوننت والد بالا برده می‌شود، فرزند مقدار + فراخوانی بازگشتی دریافت می‌کند. State (تغییرناپذیر) — فقط خواندنی. MutableState — خواندن + نوشتن. rememberSaveable — در هنگام چرخش/مرگ فرآیند پایدار می‌ماند.

State Hoisting

State Hoisting — اصل: state down, events up. وضعیت در والد ذخیره می‌شود و از طریق پارامترها به کامپوننت‌های فرزند منتقل می‌شود. کامپوننت‌های فرزند تغییرات را از طریق لامبدا (فراخوانی بازگشتی) گزارش می‌دهند. مزایا: قابلیت استفاده مجدد، تست‌پذیری، منبع واحد حقیقت. مثال: به جای اینکه MyTextField وضعیت خود را ذخیره کند، والد رشته را ذخیره می‌کند و آن را از طریق value + onValueChange منتقل می‌کند.

وضعیت مشتق شده

derivedStateOf — وضعیت محاسبه شده، فقط هنگام تغییر وابستگی‌ها دوباره محاسبه می‌شود. برای فیلتر کردن، تبدیل، اعتبارسنجی استفاده می‌شود. snapshotFlow — State را به Flow تبدیل می‌کند. برای زنجیره‌های واکنشی استفاده می‌شود. collectAsState — Flow را در State در داخل Composable جمع‌آوری می‌کند. IT Sectr استفاده از derivedStateOf برای مقادیر محاسبه شده و snapshotFlow برای اتصال State به کوروتین‌ها را توصیه می‌کند.

ظروف (Column, Row, Box, LazyColumn)

Column — چیدمان عمودی (مشابه LinearLayout عمودی). Row — چیدمان افقی. Box — چیدمان انباشته (مشابه FrameLayout). LazyColumn — لیست عمودی قابل پیمایش با بارگذاری تنبل. LazyRow — لیست افقی قابل پیمایش. Scaffold — ساختار اصلی صفحه: TopAppBar, BottomBar, FloatingActionButton, Snackbar. TopAppBar — نوار بالا. BottomNavigation — ناوبری پایین (NavigationBar در Material 3). Modifier — زنجیره: .fillMaxWidth().padding(8.dp).clickable { }. ترتیب اصلاح‌کننده‌ها مهم است — هر کدام یک لفاف جدید ایجاد می‌کند.

بهینه‌سازی LazyColumn

LazyColumn — لیست مجازی. فقط عناصر قابل مشاهده را رندر می‌کند. بهینه‌سازی: 1) key — کلید یکتا برای آیتم، 2) contentType — گروه‌بندی آیتم‌ها بر اساس نوع، 3) itemContent — به حداقل رساندن بازترکیب در داخل آیتم، 4) LazyVerticalGrid / LazyHorizontalGrid — برای شبکه‌ها. LazyLayout — چیدمان تنبل سفارشی. Paging 3 + Compose — صفحه‌بندی از طریق collectAsLazyPagingItems. IT Sectr استفاده از key(item) برای همه LazyColumn برای بازترکیب قابل پیش‌بینی را توصیه می‌کند.

ناوبری (NavController, NavHost)

Navigation Compose — کتابخانه ناوبری. NavController — پشته مقصد را مدیریت می‌کند. NavHost — ظرف گراف ناوبری. composable("route") — ثبت مقصد. navController.navigate("route") — ناوبری. popBackStack() — بازگشت. آرگومان‌ها: composable("detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType })). لینکینگ عمیق از طریق intentFilter. BottomNavigation — ادغام با NavController: NavBarItem → navigate + popUpTo.

ناوبری پیشرفته

پشته‌های بازگشت چندگانه — پشته بازگشت جداگانه برای هر تب BottomNavigation. SavedStateHandle — حفظ آرگومان‌ها هنگام مرگ فرآیند. NavArgs — آرگومان‌های ایمن از نظر نوع (Kotlin 2.0+). لینک‌های عمیق — طرح‌های URL برای لینک‌های خارجی. ژست بازگشت پیش‌بینی‌کننده (Android 14+) — پشتیبانی از ژست بازگشت با پیش‌نمایش. IT Sectr استفاده از NavArgs برای ایمنی نوع و پشته‌های بازگشت چندگانه برای BottomNavigation را توصیه می‌کند.

اثرات (LaunchedEffect, DisposableEffect)

LaunchedEffect — بلوک suspend را در Composition راه‌اندازی می‌کند. هنگام خروج از Composition لغو می‌شود. هنگام تغییر keys دوباره راه‌اندازی می‌شود. استفاده شده برای: بارگذاری داده، تایمرها، انیمیشن‌ها. DisposableEffect — برای منابعی که نیاز به پاکسازی دارند: onDispose { } — لغو اشتراک از شنوندگان، بستن اتصالات. SideEffect — اثر همزمان (هر بازترکیب). استفاده شده برای: ثبت‌نام، همگام‌سازی با کد غیر Compose. IT Sectr استفاده از LaunchedEffect برای بارگذاری داده و DisposableEffect برای پاکسازی را توصیه می‌کند.

Compose — تابع + اصلاح‌کننده. SwiftUI — struct + اصلاح‌کننده. مفاهیم مشابه هستند، نحو متفاوت است. IT Sectr یادگیری هر دو فریم‌ورک را توصیه می‌کند — درک یکی یادگیری دیگری را آسان‌تر می‌کند.

الگوهای اثر

rememberCoroutineScope — دسترسی به CoroutineScope در خارج از LaunchedEffect (مثلاً هنگام کلیک دکمه). snapshotFlow — تبدیل State به Flow برای زنجیره‌ها. produceState — تبدیل منبع غیر Compose به State. animateFloatAsState و animateColorAsState — انیمیشن‌ها از طریق اثرات. IT Sectr استفاده از rememberCoroutineScope برای رویدادهای UI و LaunchedEffect برای بارگذاری خودکار را توصیه می‌کند.

تم (MaterialTheme, Material3)

MaterialTheme — تم سراسری Compose. رنگ‌ها، تایپوگرافی، اشکال. MaterialTheme { } — کل برنامه را می‌پیچد. Material3 (M3) — سیستم طراحی Google 2023+. Dynamic Colors — سازگاری با کاغذدیوار (Android 12+). TextStyle — پیکربندی متن: fontSize, fontWeight, lineHeight. Shape — گرد کردن گوشه‌ها. Elevation — سایه‌ها. IT Sectr به طور پیش‌فرض Material3 و برای دستگاه‌های مدرن Dynamic Colors را توصیه می‌کند.

@Composable
fun AppTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) {
        darkColorScheme(
            primary = Color(0xFFBB86FC),
            secondary = Color(0xFF03DAC6)
        )
    } else {
        lightColorScheme(
            primary = Color(0xFF6200EE),
            secondary = Color(0xFF03DAC6)
        )
    }
    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography(
            bodyLarge = TextStyle(fontSize = 16.sp)
        )
    ) { content() }
}

انیمیشن‌ها (animate*, AnimatedVisibility)

animateFloatAsState — مقدار Float را متحرک می‌کند. animateColorAsState — رنگ را متحرک می‌کند. animateDpAsState — اندازه را متحرک می‌کند. AnimatedVisibility — نمایش/مخفی با .animateEnterExit(). AnimatedContent — انیمیشن هنگام تغییر محتوا (crossfade, slide). updateTransition — انیمیشن مبتنی بر وضعیت enum. Animatable — انیمیشن سفارشی از طریق رابط Animatable. IT Sectr استفاده از AnimatedVisibility برای لیست‌ها و AnimatedContent برای انتقال صفحه را توصیه می‌کند.

@Composable
fun AnimatedCounter(count: Int) {
    val animatedCount by animateFloatAsState(
        targetValue = count.toFloat(),
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )

    AnimatedContent(targetState = count) { targetCount ->
        Text(
            text = "$targetCount",
            style = MaterialTheme.typography.displayLarge,
            modifier = Modifier.animateContentSize()
        )
    }
}

تست (Compose UI Test)

Compose UI Test — تست صفحات Compose. createComposeRule() — قانون JUnit. setContent { } — تنظیم Composable. onNodeWithText, onNodeWithTag, onNodeWithContentDescription — یافتن عناصر. performClick, performTextInput, performScrollTo — اقدامات. assertIsDisplayed, assertTextEquals — ادعاها. Semantics — درخت Semantics برای دسترسی‌پذیری و تست‌ها. IdlingResource — انتظار برای عملیات ناهمزمان. تست‌های اسکرین‌شات — Papercuts, Roborazzi. IT Sectr تست‌های UI برای هر صفحه و تست‌های واحد برای ViewModel را توصیه می‌کند.

WindowSizeClass — سازگاری با اندازه صفحه (Compact, Medium, Expanded). مربوط به چیدمان‌های واکنش‌گرای Material3. در Adaptive Navigation Suite برای تغییر خودکار از BottomNavigation به NavigationRail استفاده می‌شود. IT Sectr استفاده از WindowSizeClass برای سازگاری Compose با تبلت و دسکتاپ را توصیه می‌کند.

Paging 3 + Compose — کتابخانه صفحه‌بندی از Google. PagingData — جریان صفحه. PagingConfig — تنظیمات (pageSize, prefetchDistance). collectAsLazyPagingItems() — جمع‌آوری در Compose. PagingSource — منبع سفارشی. RemoteMediator — بارگذاری ترکیبی (شبکه + DB). Paging 3 استاندارد لیست‌های پیمایش نامحدود در Compose است.