Kotlin per Jetpack Compose

Jetpack Compose è basato su Kotlin. In alcuni casi, Kotlin fornisce idiomi speciali che semplificano la scrittura di codice Compose di qualità. Se pensi in un altro linguaggio di programmazione e lo traduci mentalmente in Kotlin, è probabile che perderai alcuni dei punti di forza di Compose e potresti avere difficoltà a comprendere il codice Kotlin scritto in modo idiomatico. Acquisire maggiore familiarità con lo stile di Kotlin può aiutarti a evitare questi inconvenienti.

Argomenti predefiniti

Quando scrivi una funzione Kotlin, puoi specificare valori predefiniti per gli argomenti della funzione, utilizzati se il chiamante non passa esplicitamente questi valori. Questa funzionalità riduce la necessità di funzioni sovraccariche.

Ad esempio, supponiamo di voler scrivere una funzione che disegni un quadrato. Questa funzione potrebbe avere un solo parametro obbligatorio, sideLength, che specifica la lunghezza di ogni lato. Potrebbe avere diversi parametri facoltativi, come thickness, edgeColor e così via. Se il chiamante non li specifica, la funzione utilizza i valori predefiniti. In altre lingue, potresti dover scrivere diverse funzioni:

// We don't need to do this in Kotlin!
void drawSquare(int sideLength) { }

void drawSquare(int sideLength, int thickness) { }

void drawSquare(int sideLength, int thickness, Color edgeColor) { }
JavaSnippets.java

In Kotlin, puoi scrivere una singola funzione e specificare i valori predefiniti per gli argomenti:

fun drawSquare(
    sideLength: Int,
    thickness: Int = 2,
    edgeColor: Color = Color.Black
) {
}
KotlinSnippets.kt

Oltre a evitarti di dover scrivere più funzioni ridondanti, questa funzionalità rende il codice molto più chiaro da leggere. Se il chiamante non specifica un valore per un argomento, significa che è disposto a utilizzare il valore predefinito. Inoltre, i parametri denominati rendono molto più facile capire cosa sta succedendo. Se esamini il codice e vedi una chiamata di funzione come questa, potresti non sapere cosa significano i parametri senza controllare il codice drawSquare():

drawSquare(30, 5, Color.Red);
JavaSnippets.java

Al contrario, questo codice è autodocumentato:

drawSquare(sideLength = 30, thickness = 5, edgeColor = Color.Red)
KotlinSnippets.kt

La maggior parte delle librerie Compose utilizza argomenti predefiniti ed è buona norma fare lo stesso per le funzioni componibili che scrivi. Questa pratica rende i tuoi composables personalizzabili, ma semplifica comunque l'invocazione del comportamento predefinito. Ad esempio, potresti creare un semplice elemento di testo come questo:

Text(text = "Hello, Android!")
KotlinSnippets.kt

Questo codice ha lo stesso effetto del seguente codice molto più dettagliato, in cui più parametri Text sono impostati in modo esplicito:

Text(
    text = "Hello, Android!",
    color = Color.Unspecified,
    fontSize = TextUnit.Unspecified,
    letterSpacing = TextUnit.Unspecified,
    overflow = TextOverflow.Clip
)
KotlinSnippets.kt

Il primo snippet di codice non è solo molto più semplice e facile da leggere, ma è anche autodocumentato. Se specifichi solo il parametro text, indichi che per tutti gli altri parametri vuoi utilizzare i valori predefiniti. Al contrario, il secondo snippet implica che vuoi impostare esplicitamente i valori per questi altri parametri, anche se i valori impostati sono i valori predefiniti per la funzione.

Funzioni di ordine superiore ed espressioni lambda

Kotlin supporta le funzioni di ordine superiore, ovvero funzioni che ricevono altre funzioni come parametri. Compose si basa su questo approccio. Ad esempio, la funzione componibile Button fornisce un parametro lambda onClick. Il valore di questo parametro è una funzione che il pulsante chiama quando l'utente fa clic:

Button(
    // ...
    onClick = myClickFunction
)
// ...
KotlinSnippets.kt

Le funzioni di ordine superiore si abbinano naturalmente alle espressioni lambda, espressioni che restituiscono una funzione. Se hai bisogno della funzione una sola volta, non devi definirla altrove per passarla alla funzione di ordine superiore. In alternativa, puoi definire la funzione direttamente con un'espressione lambda. L'esempio precedente presuppone che myClickFunction() sia definito altrove. Tuttavia, se utilizzi questa funzione solo qui, è più semplice definirla in linea con un'espressione lambda:

Button(
    // ...
    onClick = {
        // do something
        // do something else
    }
) { /* ... */ }
KotlinSnippets.kt

Lambda finali

Kotlin offre una sintassi speciale per chiamare le funzioni di ordine superiore il cui ultimo parametro è una lambda. Se vuoi passare un'espressione lambda come parametro, puoi utilizzare la sintassi lambda finale. Invece di inserire l'espressione lambda tra parentesi, la inserisci dopo. Si tratta di una situazione comune in Compose, quindi devi avere familiarità con l'aspetto del codice.

Ad esempio, l'ultimo parametro di tutti i layout, come la funzione composable Column(), è content, una funzione che emette gli elementi dell'interfaccia utente secondaria. Supponiamo di voler creare una colonna contenente tre elementi di testo e di dover applicare una formattazione. Questo codice funzionerebbe, ma è molto macchinoso:

Column(
    modifier = Modifier.padding(16.dp),
    content = {
        Text("Some text")
        Text("Some more text")
        Text("Last text")
    }
)
KotlinSnippets.kt

Poiché il parametro content è l'ultimo nella firma della funzione e stiamo passando il suo valore come espressione lambda, possiamo estrarlo dalle parentesi:

Column(modifier = Modifier.padding(16.dp)) {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}
KotlinSnippets.kt

I due esempi hanno esattamente lo stesso significato. Le parentesi graffe definiscono l'espressione lambda che viene passata al parametro content.

Infatti, se l'unico parametro che stai passando è la lambda finale, ovvero se l'ultimo parametro è una lambda e non stai passando altri parametri, puoi omettere del tutto le parentesi. Supponiamo, ad esempio, che tu non debba passare un modificatore a Column. Potresti scrivere il codice in questo modo:

Column {
    Text("Some text")
    Text("Some more text")
    Text("Last text")
}
KotlinSnippets.kt

Questa sintassi è piuttosto comune in Compose, soprattutto per gli elementi di layout come Column. L'ultimo parametro è un'espressione lambda che definisce i figli dell'elemento, che vengono specificati tra parentesi graffe dopo la chiamata di funzione.

Mirini e ricevitori

Alcuni metodi e proprietà sono disponibili solo in un determinato ambito. L'ambito limitato ti consente di offrire funzionalità dove sono necessarie ed evitare di utilizzarle accidentalmente dove non sono appropriate.

Considera un esempio utilizzato in Compose. Quando chiami il layout Row composabile, la tua lambda di contenuti viene richiamata automaticamente all'interno di un RowScope. Ciò consente a Row di esporre funzionalità valide solo all'interno di un Row. L'esempio seguente mostra come Row ha esposto un valore specifico per la riga per il modificatore align:

Row {
    Text(
        text = "Hello world",
        // This Text is inside a RowScope so it has access to
        // Alignment.CenterVertically but not to
        // Alignment.CenterHorizontally, which would be available
        // in a ColumnScope.
        modifier = Modifier.align(Alignment.CenterVertically)
    )
}
KotlinSnippets.kt

Alcune API accettano le espressioni lambda chiamate nell'ambito del ricevitore. Queste espressioni lambda hanno accesso a proprietà e funzioni definite altrove, in base alla dichiarazione dei parametri:

Box(
    modifier = Modifier.drawBehind {
        // This method accepts a lambda of type DrawScope.() -> Unit
        // therefore in this lambda we can access properties and functions
        // available from DrawScope, such as the `drawRectangle` function.
        drawRect(
            /*...*/
            /* ...
        )
    }
)
KotlinSnippets.kt

Per saperne di più, consulta la sezione Function literals with receiver nella documentazione di Kotlin.

Proprietà delegate

Kotlin supporta le proprietà delegate. Queste proprietà vengono chiamate come se fossero campi, ma il loro valore viene determinato dinamicamente valutando un'espressione. Puoi riconoscere queste proprietà dal loro utilizzo della sintassi by:

class DelegatingClass {
    var name: String by nameGetterFunction()

    // ...
}
KotlinSnippets.kt

Altro codice può accedere alla proprietà con un codice simile a questo:

val myDC = DelegatingClass()
println("The name property is: " + myDC.name)
KotlinSnippets.kt

Quando viene eseguito println(), viene chiamato nameGetterFunction() per restituire il valore della stringa.

Queste proprietà delegate sono particolarmente utili quando lavori con proprietà supportate dallo stato:

var showDialog by remember { mutableStateOf(false) }

// Updating the var automatically triggers a state change
showDialog = true
KotlinSnippets.kt

Destrutturazione delle classi di dati

Se definisci una classe di dati, puoi accedere facilmente ai dati con una dichiarazione di destrutturazione. Ad esempio, supponiamo di definire una classe Person:

data class Person(val name: String, val age: Int)
KotlinSnippets.kt

Se hai un oggetto di questo tipo, puoi accedere ai suoi valori con un codice come questo:

val mary = Person(name = "Mary", age = 35)

// ...

val (name, age) = mary
KotlinSnippets.kt

Spesso vedrai questo tipo di codice nelle funzioni Compose:

Row {

    val (image, title, subtitle) = createRefs()

    // The `createRefs` function returns a data object;
    // the first three components are extracted into the
    // image, title, and subtitle variables.

    // ...
}
KotlinSnippets.kt

Le classi di dati forniscono molte altre funzionalità utili. Ad esempio, quando definisci una classe di dati, il compilatore definisce automaticamente funzioni utili come equals() e copy(). Per saperne di più, consulta la documentazione sulle classi di dati.

Oggetti singleton

Kotlin semplifica la dichiarazione di singleton, classi che hanno sempre una e una sola istanza. Questi singleton vengono dichiarati con la parola chiave object. Compose spesso utilizza questi oggetti. Ad esempio, MaterialTheme è definito come oggetto singleton; le proprietà MaterialTheme.colors, shapes e typography contengono tutte i valori del tema corrente.

Generatori e DSL type-safe

Kotlin consente di creare linguaggi specifici per il dominio (DSL) con builder type-safe. I DSL consentono di creare strutture di dati gerarchiche complesse in modo più gestibile e leggibile.

Jetpack Compose utilizza DSL per alcune API come LazyRow e LazyColumn.

@Composable
fun MessageList(messages: List<Message>) {
    LazyColumn {
        // Add a single item as a header
        item {
            Text("Message List")
        }

        // Add list of messages
        items(messages) { message ->
            Message(message)
        }
    }
}
KotlinSnippets.kt

Kotlin garantisce builder type-safe utilizzando funzioni letterali con ricevitore. Se prendiamo come esempio il composable Canvas, questo accetta come parametro una funzione con DrawScope come ricevitore, onDraw: DrawScope.() -> Unit, consentendo al blocco di codice di chiamare le funzioni membro definite in DrawScope.

Canvas(Modifier.size(120.dp)) {
    // Draw grey background, drawRect function is provided by the receiver
    drawRect(color = Color.Gray)

    // Inset content by 10 pixels on the left/right sides
    // and 12 by the top/bottom
    inset(10.0f, 12.0f) {
        val quadrantSize = size / 2.0f

        // Draw a rectangle within the inset bounds
        drawRect(
            size = quadrantSize,
            color = Color.Red
        )

        rotate(45.0f) {
            drawRect(size = quadrantSize, color = Color.Blue)
        }
    }
}
KotlinSnippets.kt

Scopri di più sui builder e sui DSL type-safe nella documentazione di Kotlin.

Coroutine Kotlin

Le coroutine offrono il supporto della programmazione asincrona a livello di linguaggio in Kotlin. Le coroutine possono sospendere l'esecuzione senza bloccare i thread. Un'interfaccia utente reattiva è intrinsecamente asincrona e Jetpack Compose risolve questo problema utilizzando le coroutine a livello di API anziché i callback.

Jetpack Compose offre API che rendono sicuro l'utilizzo delle coroutine all'interno del livello UI. La funzione rememberCoroutineScope restituisce un CoroutineScope con cui puoi creare coroutine nei gestori di eventi e chiamare le API di sospensione di Compose. Vedi l'esempio riportato di seguito che utilizza l'API animateScrollTo di ScrollState.

// Create a CoroutineScope that follows this composable's lifecycle
val composableScope = rememberCoroutineScope()
Button(
    // ...
    onClick = {
        // Create a new coroutine that scrolls to the top of the list
        // and call the ViewModel to load data
        composableScope.launch {
            scrollState.animateScrollTo(0) // This is a suspend function
            viewModel.loadData()
        }
    }
) { /* ... */ }
KotlinSnippets.kt

Per impostazione predefinita, le coroutine eseguono il blocco di codice in sequenza. Una coroutine in esecuzione che chiama una funzione di sospensione sospende la sua esecuzione finché la funzione di sospensione non restituisce un valore. Questo vale anche se la funzione di sospensione sposta l'esecuzione su un CoroutineDispatcher diverso. Nell'esempio precedente, loadData non verrà eseguito finché la funzione di sospensione animateScrollTo non restituisce un valore.

Per eseguire il codice contemporaneamente, è necessario creare nuove coroutine. Nell'esempio precedente, per parallelizzare lo scorrimento verso la parte superiore dello schermo e il caricamento dei dati da viewModel, sono necessarie due coroutine.

// Create a CoroutineScope that follows this composable's lifecycle
val composableScope = rememberCoroutineScope()
Button( // ...
    onClick = {
        // Scroll to the top and load data in parallel by creating a new
        // coroutine per independent work to do
        composableScope.launch {
            scrollState.animateScrollTo(0)
        }
        composableScope.launch {
            viewModel.loadData()
        }
    }
) { /* ... */ }
KotlinSnippets.kt

Le coroutine semplificano la combinazione di API asincrone. Nell'esempio seguente, combiniamo il modificatore pointerInput con le API di animazione per animare la posizione di un elemento quando l'utente tocca lo schermo.

@Composable
fun MoveBoxWhereTapped() {
    // Creates an `Animatable` to animate Offset and `remember` it.
    val animatedOffset = remember {
        Animatable(Offset(0f, 0f), Offset.VectorConverter)
    }

    Box(
        // The pointerInput modifier takes a suspend block of code
        Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                // Create a new CoroutineScope to be able to create new
                // coroutines inside a suspend function
                coroutineScope {
                    while (true) {
                        // Wait for the user to tap on the screen
                        val offset = awaitPointerEventScope {
                            awaitFirstDown().position
                        }
                        // Launch a new coroutine to asynchronously animate to
                        // where the user tapped on the screen
                        launch {
                            // Animate to the pressed position
                            animatedOffset.animateTo(offset)
                        }
                    }
                }
            }
    ) {
        Text("Tap anywhere", Modifier.align(Alignment.Center))
        Box(
            Modifier
                .offset {
                    // Use the animated offset as the offset of this Box
                    IntOffset(
                        animatedOffset.value.x.roundToInt(),
                        animatedOffset.value.y.roundToInt()
                    )
                }
                .size(40.dp)
                .background(Color(0xff3c1361), CircleShape)
        )
    }
KotlinSnippets.kt

Per scoprire di più sulle coroutine, consulta la guida Coroutine Kotlin su Android.