Jetpack Compose στην ανάπτυξη κινητών: τι είναι, βασικές έννοιες και πώς λειτουργεί

Βασικά του Jetpack Compose (@Composable, Composition, Recomposition)

@Composable — σχολιασμός που μετατρέπει μια συνάρτηση σε Composable. Οι συναρτήσεις Composable είναι δομικά στοιχεία UI. Δεν επιστρέφουν View, εκπέμπουν στοιχεία στο Composition. Composition — ένα δέντρο UI χτισμένο από κλήσεις συναρτήσεων Composable. Το Compose συγκρίνει το νέο δέντρο με το παλιό και ενημερώνει μόνο τα αλλαγμένα μέρη.

Recomposition

Recomposition — επανεκκίνηση συναρτήσεων Composable όταν αλλάζει η κατάσταση. Το Compose παρακολουθεί ποιες καταστάσεις διαβάζονται σε κάθε συνάρτηση. Όταν μια κατάσταση αλλάζει, το Compose επανεκκινεί μόνο τις συναρτήσεις που διαβάζουν αυτήν την κατάσταση (Smart 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 })). Deep linking μέσω intentFilter. BottomNavigation — ενσωμάτωση με NavController: NavBarItem → navigate + popUpTo.

Προηγμένη πλοήγηση

Πολλαπλές στοίβες επιστροφής — ξεχωριστή στοίβα επιστροφής για κάθε καρτέλα BottomNavigation. SavedStateHandle — διατήρηση ορισμάτων κατά θάνατο διεργασίας. NavArgs — ασφαλή ορίσματα τύπου (Kotlin 2.0+). Deep links — σχήματα 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 συνιστά την εκμάθηση και των δύο frameworks — η κατανόηση του ενός διευκολύνει την εκμάθηση του άλλου.

Μοτίβα εφέ

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 σε tablet και επιτραπέζιους υπολογιστές.

Paging 3 + Compose — βιβλιοθήκη σελιδοποίησης από την Google. PagingData — ροή σελίδων. PagingConfig — ρυθμίσεις (pageSize, prefetchDistance). collectAsLazyPagingItems() — συλλογή στο Compose. PagingSource — προσαρμοσμένη πηγή. RemoteMediator — υβριδική φόρτωση (δίκτυο + ΒΔ). Το Paging 3 είναι το πρότυπο για λίστες με άπειρη κύλιση στο Compose.