Sukurk CartScreen.kt — gyva suma

Dabar — ekranas, kuris stebi būseną. feature/cart/presentation/CartScreen.kt.

val state by viewModel.uiState.collectAsStateWithLifecycle() — prisijungiam prie StateFlow. Kai būsena keičiasi, ekranas automatiškai persipiešia. WithLifecycle reiškia „nustok klausytis, kai ekranas fone" (taupom resursus).
if (state.isEmpty) { ... } — tuščias krepšelis gauna savo vaizdą.
LazyColumn { items(state.items) { ... } } — kiekvienai prekei kortelė su pavadinimu, kaina ir kiekio valdikliais (− / +).
Kiekvienas paspaudimas — įvykis aukštyn: viewModel.onEvent(CartEvent.IncreaseQuantity(...)). Ekranas nieko neskaičiuoja pats — tik siunčia įvykius ir rodo būseną.
Apačioje — Total: €... iš state.totalPrice.

Čia ir yra MVI grožis: paspaudei + → įvykis → ViewModel pagamina naują būseną → totalPrice perskaičiuota → suma ekrane atsinaujina. Gyvai, be jokio rankinio „atnaujink sumą".

Patikrink. Kad pamatytum krepšelį veikiant, laikinai pridėk kelias prekes (kitą pamoką tai darys meniu). Pavyzdžiui, CartScreen.kt peržiūroje ar per laikiną mygtuką iškviesk onEvent(CartEvent.AddItem(pica)). Tada:

Paspaudi „+" ant Margherita (€8.50):
  kiekis: 1 → 2        Total: €8.50 → €17.00   (atsinaujina iškart)
Paspaudi „−" iki 0:
  prekė dingsta iš krepšelio

Suma juda kartu su kiekiu — realaus laiko, be jokio papildomo kodo.

Patarimas. Mokėjimo mygtukas („Pay") čia sąmoningai praleistas — Stripe ateis 11 pamokoje. Kol kas krepšelis pilnai veikia atmintyje. Kitą pamoką sujungsim ekranus: meniu „Add to cart" mygtukas siųs CartEvent.AddItem, o navigacija (Nav3) leis pereiti meniu → krepšelis.

CartScreen.kt SUKURTI

Sukurk šį failą kataloge app/src/main/java/eif/viko/lt/pica/feature/cart/presentation/

package eif.viko.lt.pica.feature.cart.presentation

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.Card
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.compose.collectAsStateWithLifecycle

@Composable
fun CartScreen(viewModel: CartViewModel) {
    // Observe the ViewModel's state; the UI recomposes whenever it changes.
    val state by viewModel.uiState.collectAsStateWithLifecycle()

    if (state.isEmpty) {
        Box(Modifier.fillMaxSize(), Alignment.Center) { Text("Your cart is empty") }
        return
    }

    Column(Modifier.fillMaxSize()) {
        LazyColumn(
            Modifier
                .weight(1f)
                .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp)
        ) {
            items(state.items) { cartItem ->
                Card(Modifier.fillMaxWidth()) {
                    Row(
                        Modifier
                            .fillMaxWidth()
                            .padding(16.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Column(Modifier.weight(1f)) {
                            Text(cartItem.menuItem.name, style = MaterialTheme.typography.titleMedium)
                            Text("€%.2f".format(cartItem.menuItem.price))
                        }
                        // Every tap is an EVENT sent up to the ViewModel.
                        IconButton(onClick = {
                            viewModel.onEvent(CartEvent.DecreaseQuantity(cartItem.menuItem))
                        }) { Text("−") }
                        Text("${cartItem.quantity}")
                        IconButton(onClick = {
                            viewModel.onEvent(CartEvent.IncreaseQuantity(cartItem.menuItem))
                        }) { Text("+") }
                    }
                }
            }
        }

        // The live total — recomputed by the state every time items change.
        Surface(tonalElevation = 3.dp) {
            Row(
                Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text("Total: €%.2f".format(state.totalPrice), style = MaterialTheme.typography.titleLarge)
                // The "Pay" button + checkout arrive in lesson 11 (Stripe).
            }
        }
    }
}