Tema
/
Mobiliosios programėlės KOTLIN
Pamoka 2 / 14 Compose UI ir išdėstymas ~45 min
📖 Teorija

Compose UI: funkcijos, ne XML

1 pamokoje matei: Compose UI — funkcijos su @Composable, ne XML failai. Šiandien iš to sudėsim tikrą meniu.

Trys sąvokos, kurių reikės:

  • Kompozuojamas elementas — funkcija, aprašanti UI gabalą: Text(...), Card { ... }, Column { ... }. Vieni kviečia kitus — taip auga ekranas.
  • Modifier — kaip elementas atrodo ir elgiasi: Modifier.fillMaxWidth().padding(16.dp). Grandinėlė skaitosi iš kairės į dešinę.
  • LazyColumn — slenkamas sąrašas, kuris atvaizduoja tik matomus elementus (ne visą šimtą iškart). Meniu gali būti ilgas, todėl Column čia netinka — reikia LazyColumn.

Material 3 duoda paruoštus komponentus tinkama Android išvaizda: Scaffold (ekrano karkasas su viršutine juosta), TopAppBar, Card, Text su MaterialTheme.typography stiliais.

Meniu ekrano planas:

Scaffold
 └─ TopAppBar("Pica Menu")
 └─ LazyColumn
     └─ kiekvienai picai: Card { pavadinimas · aprašymas · kaina }

Duomenys šiandien bus statiniai — trumpas picų sąrašas kode. Tikrą meniu iš serverio (GET /menu) prijungsim 5 pamokoje; kol kas svarbu, kad ekranas atrodytų teisingai. Pradėkim nuo modelio — kaip atrodo viena pica kode.