Compose

Write UI with Compose Multiplatform.

UI with Compose

The fourth lesson represents the Compose Multiplatform UI layer. A @Composable function draws data onto the screen.

In our model the noteView function takes a Note and returns its title as a string. Real Compose would feed this string to a Text component; we model it by printing to the console. The call noteView(b.build()) connects the builder output to the UI. This is the bridge between the data layer and the UI.

The noteView and builder bridge

The noteView function carries the builder output to the UI. The call noteView(b.build()) bridges data and UI.

Example model: fun noteView(note: Note): String = note.title. In main you write val b = NoteBuilder(); b.title = "Compose"; println(noteView(b.build())). This corresponds to a Text component in real Compose. The data flow is unidirectional: the builder produces, noteView draws.

Exercise Add the noteView function

Define fun noteView(note: Note): String = note.title. In main, do val b = NoteBuilder(); b.title = "Compose" and write println(noteView(b.build())).

Show example solution

object App {
    fun run(): String = "Expert Notes"
}

data class Note(val id: Int, val title: String)

annotation class AutoBuilder

class NoteBuilder {
    var id = 0
    var title = ""
    fun build(): Note = Note(id, title)
}

fun noteView(note: Note): String = note.title

fun main() {
    val b = NoteBuilder()
    b.title = "Compose"
    println(noteView(b.build()))
}

Test yourself

Complete the noteView declaration

@Composable fun NoteView(note: ____): String { return note.title }

Show answer

@Composable fun NoteView(note: Note): String { return note.title }

Match the Compose parts

noteView

UI function
b.build()

Data source
note.title

Shown text
Text

Real component
Which paradigm does Compose MP use to build UI?
```
Compose builds UI with declarations.
```
- Imperative
- XML layout
- Procedural
- Declarative
Show answer

Declarative — Compose builds UI with the declarative paradigm.

Next lesson: Putting it together

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies