Jetpack Compose: βασικά, συναρτήσεις Composable και State

Τι είναι το Jetpack Compose;

Jetpack Compose — UI framework της Google βασισμένο σε αρχές αντιδραστικού προγραμματισμού. Αντί για Activity με διατάξεις XML, FragmentManager και ViewBinding, ο προγραμματιστής περιγράφει τη διεπαφή μέσω συναρτήσεων Kotlin με σχολιασμό @Composable. Το Compose δεν χρησιμοποιεί LayoutInflater — το UI είναι καθαρές συναρτήσεις Kotlin, μεταγλωττισμένες σε bytecode. Το framework αποτελείται από πολλές βιβλιοθήκες: Compose UI (βασικά στοιχεία Text, Button, Column, Row), Compose Foundation (Material Design, Χειρονομίες, Εστίαση), Compose Material3 (Material You με Dynamic Colors) και Compose Runtime (State, Side Effects, Coroutines). Το Compose λειτουργεί σε Android API 21+ (Android 5.0) και είναι πλήρως συμβατό με υπάρχον κώδικα View/XML μέσω ComposeView — του προσαρμογέα AndroidView.

Compose vs View System

View System (2008) χρησιμοποιεί ιεραρχία αντικειμένων View με μη αυτόματη διαχείριση: ο προγραμματιστής δημιουργεί διάταξη XML, βρίσκει View μέσω findViewById, υλοποιεί Adapter για RecyclerView και καλεί notifyDataSetChanged κατά την αλλαγή δεδομένων. Το Compose περιγράφει το UI λειτουργικά: κατά την αλλαγή κατάστασης, το framework επανεκκινεί (recompose) μόνο τις τροποποιημένες συναρτήσεις Composable, υπολογίζει diff και εφαρμόζει ελάχιστες αλλαγές στο Canvas. Η απόδοση του Compose είναι συγκρίσιμη με το View System, και σε σενάρια με σύνθετες λίστες (LazyColumn) συχνά υπερτερεί του RecyclerView παρακάμπτοντας περιττά στοιχεία μέσω της παραμέτρου key. Στην IT Sectr, το Compose χρησιμοποιείται για νέες ενότητες εφαρμογών Android με minSdk 24+.

Συναρτήσεις Composable: δομικά στοιχεία UI

@Composable — σχολιασμός που μετατρέπει μια συνηθισμένη συνάρτηση Kotlin σε δομικό στοιχείο UI. Οι συναρτήσεις Composable μπορούν να καλούν άλλες συναρτήσεις Composable, σχηματίζοντας δέντρο στοιχείων. Σε αντίθεση με το View, οι συναρτήσεις Composable δεν έχουν προεπιλεγμένη κατάσταση — είναι stateless και ανασχεδιάζονται σε κάθε αλλαγή παραμέτρων εισόδου ή State. Ο μεταγλωττιστής (Compose Compiler) μετασχηματίζει τις @Composable συναρτήσεις σε κώδικα που μπορεί να διακοπεί και να συνεχιστεί (positional memoization) — αυτό επιτρέπει στο Compose να επανεκκινεί μόνο τα τροποποιημένα μέρη χωρίς πλήρη ανακατασκευή του δέντρου.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun UserProfile(name: String, avatarUrl: String) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        AsyncImage(
            model = avatarUrl,
            contentDescription = "User avatar",
            modifier = Modifier.size(48.dp)
        )
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = name,
            style = MaterialTheme.typography.titleMedium
        )
    }
}

Η συνάρτηση UserProfile δέχεται name και avatarUrl ως παραμέτρους, χτίζει μια γραμμή με άβαταρ και όνομα. Το Modifier.fillMaxWidth() τεντώνει το στοιχείο σε πλήρες πλάτος, το .padding(16.dp) προσθέτει αποστάσεις. Το MaterialTheme.typography.titleMedium χρησιμοποιεί το στυλ συστήματος Material 3. Κατά την αλλαγή των παραμέτρων name ή avatarUrl, το Compose επανεκκινεί το UserProfile — εκ νέου δημιουργία του στοιχείου με νέες τιμές.

State και Recomposition στο Jetpack Compose

State στο Compose — οποιαδήποτε τιμή της οποίας η αλλαγή προκαλεί ανασύνθεση (επανεκκίνηση) των εξαρτημένων @Composable συναρτήσεων. Η βασική μέθοδος είναι η mutableStateOf(), που δημιουργεί MutableState<T> με υποστήριξη για το σύστημα στιγμιότυπων Compose. Snapshot — μηχανισμός παρακολούθησης αλλαγών: κατά την εγγραφή στο State, το Compose σημειώνει το τρέχον Snapshot ως βρώμικο και ο προγραμματιστής ανασύνθεσης επανεκκινεί μόνο τις συναρτήσεις Composable που διαβάζουν αυτό το State. Για παρατηρήσιμες συλλογές χρησιμοποιήστε mutableStateListOf() και mutableStateMapOf(). Το Compose υποστηρίζει State από στοιχεία Lifecycle-Aware μέσω collectAsState() για Kotlin Flow και observeAsState() για LiveData.

@Composable
fun LikeButton() {
    var liked by remember { mutableStateOf(false) }
    var count by remember { mutableStateOf(42) }
    
    Button(
        onClick = {
            liked = !liked
            if (liked) count++ else count--
        },
        colors = ButtonDefaults.buttonColors(
            containerColor = if (liked) MaterialTheme.colorScheme.primary
                else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Text("♥ $count")
    }
}

Ο κώδικας δημιουργεί ένα κουμπί «Like» με κατάσταση liked (Boolean) και count (Int), αποθηκευμένα μέσω mutableStateOf(). Κατά το πάτημα, το liked αντιστρέφεται, ο μετρητής αυξάνεται/μειώνεται — το Compose επανεκκινεί αυτόματα το LikeButton. Ο by delegate επιτρέπει τη χρήση του State ως συνηθισμένης μεταβλητής: liked = !liked αντί για liked.value = !liked.value. Το χρώμα του κουμπιού αλλάζει αντιδραστικά μεταξύ primary (αρεστό) και surfaceVariant (μη αρεστό).

remember: προσωρινή αποθήκευση μεταξύ ανασυνθέσεων

remember — συνάρτηση Compose που αποθηκεύει προσωρινά την τιμή μεταξύ ανασυνθέσεων. Χωρίς remember, κάθε επανεκκίνηση της συνάρτησης Composable δημιουργεί νέα κατάσταση (mutableStateOf) — αυτό σπάει τη λογική της εφαρμογής: κατά την περιστροφή οθόνης ή αλλαγή γονικού State, ο μετρητής επαναφέρεται. Το remember δέχεται ένα lambda-υπολογιστή και υπολογίζει την τιμή μόνο στην πρώτη σύνθεση· στις επόμενες επιστρέφει το προσωρινά αποθηκευμένο αποτέλεσμα. Για επαναφορά της προσωρινής μνήμης χρησιμοποιήστε remember(key) — το κλειδί καθορίζει πότε να υπολογιστεί ξανά η τιμή. Το remember(key1, key2) υπολογίζει ξανά κατά την αλλαγή οποιουδήποτε κλειδιού. Για μακροχρόνιες καταστάσεις (που επιβιώνουν περιστροφής οθόνης) χρησιμοποιήστε rememberSaveable — ανάλογο του remember με αποθήκευση στο Bundle μέσω SavedStateHandle.

@Composable
fun TimerScreen() {
    var seconds by rememberSaveable { mutableStateOf(0) }
    
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            seconds++
        }
    }
    
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Πέρασε: ${seconds}s",
            style = MaterialTheme.typography.displayMedium
        )
    }
}

Το rememberSaveable διατηρεί το seconds κατά την περιστροφή οθόνης (αλλαγή διαμόρφωσης). Το LaunchedEffect εκκινεί μια κορουτίνα που αυξάνει το seconds κάθε δευτερόλεπτο. Κατά την ανασύνθεση του TimerScreen (κάθε δευτερόλεπτο) το seconds δεν επαναφέρεται χάρη στο rememberSaveable. Χρησιμοποιήστε το συνηθισμένο remember για κατάσταση που δεν πρέπει να επιβιώνει αλλαγών διαμόρφωσης (π.χ. σημαίες κινούμενων σχεδίων).

Modifier: αλυσίδα ρυθμίσεων Composable

Modifier — αμετάβλητο αντικείμενο-δοχείο που υλοποιεί το μοτίβο Builder για ρύθμιση της εμφάνισης, συμπεριφοράς και διάταξης των στοιχείων Composable. Κάθε κλήση μεθόδου Modifier (.padding(), .width(), .clickable(), .background()) επιστρέφει ένα νέο Modifier με το προστιθέμενο στοιχείο. Η σειρά των τροποποιητών έχει σημασία: .padding(16.dp).clickable { } — η απόσταση εφαρμόζεται πριν από τον χειριστή κλικ, το clickable παρακολουθεί ολόκληρη την περιοχή λαμβάνοντας υπόψη την απόσταση. .clickable { }.padding(16.dp) — ολόκληρη η περιοχή πριν από την απόσταση είναι κλικ, η απόσταση μετακινεί το περιεχόμενο προς τα μέσα. Το Modifier υποστηρίζει προσαρμοσμένες υλοποιήσεις μέσω then(otherModifier) και compositionLocal για πρόσβαση σε γονικές ρυθμίσεις.

@Composable
fun CardExample() {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { println("Η κάρτα πατήθηκε") },
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text("Jetpack Compose", style = MaterialTheme.typography.titleLarge)
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                "Δηλωτικό UI για Android με State και Modifier",
                style = MaterialTheme.typography.bodyMedium
            )
        }
    }
}

Το CardExample παρουσιάζει την αλυσίδα Modifier: fillMaxWidth + padding + clickable. Η Card — στοιχείο Material3 με δικές του ρυθμίσεις elevation και colors. Το ένθετο Column έχει εσωτερική απόσταση 16dp. Το Compose Material3 προσαρμόζει αυτόματα τα χρώματα στο Dynamic Color (Material You) σε Android 12+. Η Card είναι ένα από τα 30+ ενσωματωμένα στοιχεία Material3 στο Compose.

State hoisting και αρχιτεκτονική Compose

State hoisting — μοτίβο ανύψωσης της κατάστασης από τη συνάρτηση Composable στον καλούντα, καθιστώντας τη συνάρτηση stateless. Το stateless στοιχείο λαμβάνει δεδομένα και callbacks μέσω παραμέτρων, χωρίς να κατέχει δικό του State. Αυτό αυξάνει την επαναχρησιμοποίηση και τη δοκιμασιμότητα: το στοιχείο μπορεί να κληθεί με διαφορετικά State και να δοκιμαστεί σε προεπισκόπηση. Η Google συνιστά την αρχιτεκτονική: ViewModel + StateFlow (ή MutableStateFlow) + collectAsState() στο Compose. Το ViewModel ανυψώνει την κατάσταση σε επίπεδο οθόνης, το Compose εμφανίζει. Οι παρενέργειες (LaunchedEffect, DisposableEffect) χειρίζονται εφάπαξ γεγονότα.