Composable Function: τι είναι, σύνταξη συνάρτησης και κανόνες

Τι είναι το Composable Function στο Jetpack Compose

Composable Function — είναι μια συνάρτηση στη γλώσσα Kotlin επισημασμένη με το annotation @Composable, που περιγράφει ένα μέρος της διεπαφής χρήστη με δηλωτικό τρόπο. Αντί να δημιουργεί και να ρυθμίζει αντικείμενα View μέσω κώδικα Java ή σήμανσης XML, ο προγραμματιστής απλά γράφει πώς πρέπει να φαίνεται το UI σε κάθε κατάσταση δεδομένων.

Η κύρια διαφορά μεταξύ της Composable συνάρτησης και του παραδοσιακού συστήματος View του Android έγκειται στο μοντέλο ενημέρωσης. Στην κλασική προσέγγιση, ο προγραμματιστής καλούσε χειροκίνητα το findViewById, άλλαζε κείμενο μέσω setText, διαχειριζόταν την ορατότητα μέσω setVisibility. Composable Function απελευθερώνει από αυτή τη ρουτίνα: όταν αλλάζουν τα δεδομένα, το σύστημα καθορίζει μόνο του ποιες συναρτήσεις πρέπει να επανεκκινηθούν και εκτελεί μόνο αυτές.

Ο μεταγλωττιστής Kotlin, επεξεργαζόμενος το annotation @Composable, παράγει επιπλέον κώδικα που ενσωματώνει τη συνάρτηση στον μηχανισμό σύνθεσης. Αυτός ο κώδικας περιλαμβάνει ανάγνωση και εγγραφή σε υποδοχές — ειδικά κελιά μνήμης που αποθηκεύουν την κατάσταση και τις παραμέτρους κάθε Composable συνάρτησης στο τρέχον δέντρο UI. Χάρη σε αυτή την ενσωμάτωση, το Compose γνωρίζει ποιες συναρτήσεις εξαρτώνται από ποια δεδομένα.

Σύνταξη δήλωσης Composable συνάρτησης

Η σύνταξη της Composable συνάρτησης είναι εξαιρετικά συνοπτική: αρκεί να προσθέσετε @Composable πριν από τη λέξη-κλειδί fun. Η συνάρτηση μπορεί να δέχεται οποιεσδήποτε παραμέτρους, να περιλαμβάνει άλλες κλήσεις Composable στο σώμα της και να χρησιμοποιεί κατασκευές Kotlin — συνθήκες, βρόχους, εκφράσεις when — για υπό όρους εμφάνιση UI.

@Composable
fun ProductItem(
    product: Product,
    modifier: Modifier = Modifier,
    onAddToCart: () -> Unit
) {
    Card(modifier = modifier.padding(8.dp)) {
        Row(modifier = Modifier.fillMaxWidth().padding(12.dp),
            verticalAlignment = Alignment.CenterVertically) {
            Column(modifier = Modifier.weight(1f)) {
                Text(text = product.name, style = MaterialTheme.typography.titleMedium)
                Text(text = "${product.price}", color = MaterialTheme.colorScheme.primary)
            }
            Button(onClick = onAddToCart) {
                Text("Προσθήκη στο καλάθι")
            }
        }
    }
}

Σε αυτό το παράδειγμα, η Composable συνάρτηση ProductItem δέχεται ένα αντικείμενο Product, έναν τροποποιητή και ένα callback. Και οι τρεις παράμετροι είναι αμετάβλητες, γεγονός που εγγυάται προβλέψιμη συμπεριφορά κατά την recomposition. Ο τροποποιητής μεταβιβάζεται ως παράμετρος με προεπιλεγμένη τιμή — αυτή είναι μια τυπική πρακτική που επιτρέπει στην καλούσα πλευρά να προσαρμόζει τα περιθώρια και τα μεγέθη.

Στοιχεία και τροποποιητές σε Composable συναρτήσεις

Μέσα σε μια Composable συνάρτηση χρησιμοποιούνται ενσωματωμένα στοιχεία Material Design (Text, Button, Card, TextField) ή θεμελιώδη πρωτόγονα (Canvas, Layout). Κάθε στοιχείο δέχεται παραμέτρους για τη διαμόρφωση της εμφάνισης και συμπεριφοράς, καθώς και έναν ή περισσότερους τροποποιητές μέσω της παραμέτρου modifier.

Οι τροποποιητές (Modifier) — είναι μια αλυσίδα συναρτήσεων που αλλάζουν το μέγεθος, τη θέση, τον χειρισμό γεγονότων και την εμφάνιση του στοιχείου. Η σειρά των τροποποιητών στην αλυσίδα έχει σημασία: το clickable.semantics λειτουργεί διαφορετικά από το semantics.clickable, και το padding.background χρωματίζει το φόντο της περιοχής συμπεριλαμβανομένου του padding, κάτι που είναι κρίσιμο κατά τον σχεδιασμό.

Μέσα σε μια Composable συνάρτηση μπορούν να χρησιμοποιηθούν συνθήκες if και when για υπό όρους εμφάνιση τμημάτων UI, καθώς και βρόχοι for για δυναμικές λίστες. Όλες αυτές οι κατασκευές λειτουργούν φυσικά, καθώς η Kotlin είναι μια πλήρης γλώσσα προγραμματισμού. Ωστόσο, είναι σημαντικό να θυμάστε: εάν η συνθήκη ή ο βρόχος περιέχει κλήσεις Composable συναρτήσεων, αυτές συμμετέχουν επίσης στην recomposition.

@Composable
fun ProductList(
    products: List<Product>,
    modifier: Modifier = Modifier
) {
    LazyColumn(modifier = modifier) {
        items(products, key = { it.id }) { product ->
            ProductItem(
                product = product,
                onAddToCart = { /* add to cart */ }
            )
        }
    }
}

Παραδείγματα Composable συναρτήσεων για πραγματικές οθόνες

Ας εξετάσουμε ένα παράδειγμα οθόνης αναζήτησης προϊόντων χρησιμοποιώντας πολλές Composable συναρτήσεις. Εδώ εμφανίζονται τυπικά μοτίβα: πεδίο εισαγωγής με κατάσταση, φιλτράρισμα λίστας, χειρισμός κενού αποτελέσματος και φόρτωσης.

data class Product(
    val id: String,
    val name: String,
    val price: Double,
    val category: String
)

@Composable
fun SearchScreen() {
    var query by remember { mutableStateOf("") }
    val products = remember(query) { getFilteredProducts(query) }

    Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
        OutlinedTextField(
            value = query,
            onValueChange = { query = it },
            label = { Text("Αναζήτηση προϊόντων") },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        when (products) {
            is Loading -> CircularProgressIndicator()
            is Empty -> Text("Δεν βρέθηκαν αποτελέσματα")
            is Result -> LazyColumn {
                items(products.items, key = { it.id }) { product ->
                    ProductItem(product = product, onAddToCart = {})
                }
            }
        }
    }
}

Αυτό το παράδειγμα επιδεικνύει πολλά ιδιώματα ταυτόχρονα: remember για αποθήκευση της κατάστασης του ερωτήματος αναζήτησης, remember(query) για φιλτράρισμα με κλειδί, when για τρεις καταστάσεις UI και LazyColumn για αποτελεσματική εμφάνιση λίστας. Κάθε ένα από αυτά τα ιδιώματα είναι αποτέλεσμα πρακτικής εμπειρίας στην ανάπτυξη εφαρμογών Compose.

Παράμετροι και Slot API

Οι Composable συναρτήσεις δέχονται παραμέτρους όπως οι συνηθισμένες συναρτήσεις Kotlin, αλλά με μια σημαντική διαφορά: η παράμετρος μπορεί να είναι μια άλλη Composable συνάρτηση που μεταβιβάζεται μέσω lambda με annotation @Composable. Αυτός ο μηχανισμός ονομάζεται Slot API και είναι το κύριο μοτίβο για τη δημιουργία επαναχρησιμοποιήσιμων δοχείων.

Το Slot API λύνει το πρόβλημα που στο παραδοσιακό σύστημα View λυνόταν μέσω ViewGroup και προγραμματικής προσθήκης θυγατρικών View. Αντί για μεθόδους addView, το Compose χρησιμοποιεί lambdas content — την τελευταία παράμετρο με τύπο @Composable () -> Unit. Η καλούσα πλευρά μεταβιβάζει οποιοδήποτε UI σε αυτή τη lambda, και το δοχείο καθορίζει μόνο τη διάταξή του.

Οι παράμετροι της Composable συνάρτησης μπορούν να έχουν προεπιλεγμένες τιμές, γεγονός που απλοποιεί τη χρήση τους σε διαφορετικά περιβάλλοντα. Συνιστάται να καθιστάτε υποχρεωτικές μόνο εκείνες τις παραμέτρους χωρίς τις οποίες η συνάρτηση δεν μπορεί να εκτελέσει την εργασία της, και τις υπόλοιπες να τις εφοδιάζετε με λογικές προεπιλεγμένες τιμές.

Ιδιώματα Composable συναρτήσεων στην Kotlin

Στην κοινότητα Compose έχουν διαμορφωθεί αρκετά καθιερωμένα ιδιώματα που καθιστούν τις Composable συναρτήσεις πιο ευανάγνωστες και προβλέψιμες. Το πρώτο — State Hoisting: η κατάσταση ανυψώνεται σε υψηλότερο επίπεδο και η Composable συνάρτηση τη λαμβάνει μέσω παραμέτρων. Αυτό καθιστά τη συνάρτηση καθαρή και επαναχρησιμοποιήσιμη σε διαφορετικά περιβάλλοντα.

Το δεύτερο ιδίωμα — παράμετροι Event-driven. Αντί να μεταβιβάζετε ViewModel ή useCase στην Composable συνάρτηση, μεταβιβάζονται μόνο συγκεκριμένα callback: onSave, onDelete, onNavigateToDetail. Αυτό μειώνει τη σύζευξη και απλοποιεί τη δοκιμή — για τη δοκιμή του ProductItem δεν χρειάζεται ViewModel, μόνο ένα lambda-stub.

Το τρίτο ιδίωμα — CompositionLocal για τη μεταβίβαση κοινών δεδομένων μέσω του δέντρου σύνθεσης. Θέμα, πυκνότητα οθόνης, τρέχουσα διαδρομή — όλα αυτά μεταβιβάζονται μέσω CompositionLocal, αποφεύγοντας αλυσίδες παραμέτρων μέσω δεκάδων Composable συναρτήσεων. Ωστόσο, δεν πρέπει να γίνεται κατάχρηση του CompositionLocal: οι ρητές παράμετροι είναι πάντα προτιμότερες από τις σιωπηρές εξαρτήσεις.

// State Hoisting: κατάσταση ανυψώθηκε στη γονική συνάρτηση
@Composable
fun CounterDisplay(
    count: Int,
    onIncrement: () -> Unit
) {
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Text(text = "Μετρητής: $count", style = MaterialTheme.typography.headlineLarge)
        Button(onClick = onIncrement) {
            Text("+1")
        }
    }
}

// Χρήση με State Hoisting
@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    CounterDisplay(
        count = count,
        onIncrement = { count++ }
    )
}