Compose
- Kotlin kursu
- Uzman
- Ders 46/47
- 6 dk
Compose Multiplatform ile UI yazarsın.
Compose ile UI
Dördüncü ders, Compose Multiplatform UI katmanını temsil eder. Bir @Composable fonksiyon veriyi ekrana çizer.
Modelimizde noteView fonksiyonu bir Note alır ve başlığını dize olarak döndürür. Gerçek Compose bu dizeyi bir Text bileşenine verir; biz konsola yazdırarak modelliyoruz. noteView(b.build()) çağrısı builder çıktısını UI'ya bağlar. Bu, veri katmanı ile UI arasındaki köprüdür.
noteView ve builder köprüsü
noteView fonksiyonu, builder çıktısını UI'ya taşır. noteView(b.build()) çağrısı veri ile UI arasında köprü kurar.
Örnek model: fun noteView(note: Note): String = note.title. main'de val b = NoteBuilder(); b.title = "Compose"; println(noteView(b.build())) yazılır. Bu, gerçek Compose'da bir Text bileşenine denk düşer. Veri akışı tek yönlüdür: builder üretir, noteView çizer.
Uygulama noteView fonksiyonunu ekle
fun noteView(note: Note): String = note.title tanımla. main içinde val b = NoteBuilder(); b.title = "Compose" yapıp println(noteView(b.build())) yaz.
Başlangıç kodu
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)
}
// noteView fonksiyonunu ekle (note: Note) -> String
fun main() {
// NoteBuilder ile Note oluştur, noteView ile göster ve yazdır
}Örnek çözüm
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()))
}Beklenen çıktı
Compose
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 noteView bildirimini tamamla
@Composable fun NoteView(note: ____): String { return note.title }@Composable fun NoteView(note: Note): String { return note.title }Açıklama: noteView(note: Note) bir Note alır ve başlık döndürür.
2 Compose parçalarını eşle
| Kavram | Anlamı |
|---|---|
noteView |
UI fonksiyonu |
b.build() |
Veri kaynağı |
note.title |
Görüntülenen metin |
Text |
Gerçek bileşen |
3 Compose MP hangi paradigma ile UI kurar?
Compose builds UI with declarations.- Emirli (imperative)
- XML layout
- Prosedürel
- Deklaratif Doğru cevap
Açıklama: Compose deklaratif paradigma ile UI kurar.