◆ Sparround

Compose əsasları: composable, recomposition, state

Jetpack Compose — deklarativ UI: ekranı state-in funksiyası kimi təsvir edirsən, framework dəyişiklikləri özü tətbiq edir. XML-dəki "view tap, dəyərini yenilə" imperativ modeli yoxdur.

Əsas anlayışlar:

  • @Composable funksiya — UI-ın tikinti bloku; UI emit edir, dəyər qaytarmır; adları böyük hərflə.
  • Recomposition — oxunan state dəyişəndə Compose yalnız həmin state-dən asılı composable-ları yenidən çağırır. Ağıllı skip: parametrlər dəyişməyibsə (stable tiplərdə equals), composable ötürülür.
  • State: remember { mutableStateOf(...) } — recomposition-lar arasında yaşayan dəyər; rememberSaveable — configuration change/prosesin ölümünə davamlı.
  • State hoisting — state-i yuxarı qaldır: uşaq composable value + onValueChange alır, özü state saxlamır → yenidənistifadə və test asanlaşır.
  • Stateless vs stateful composable: stateless olanlar preview və test üçün ideal; stateful yalnız nazik wrapper olmalıdır.
kotlin
// Stateless — yenidənistifadə olunan, test olunan
@Composable
fun AmountField(
    amount: String,
    onAmountChange: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    OutlinedTextField(
        value = amount,
        onValueChange = onAmountChange,
        label = { Text("Məbləğ") },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Decimal),
        modifier = modifier
    )
}

// Sahib — state ViewModel-dədir
@Composable
fun TransferScreen(viewModel: TransferViewModel = hiltViewModel()) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()

    AmountField(
        amount = uiState.amount,
        onAmountChange = viewModel::onAmountChanged
    )
}

State hoisting: stateless sahə + stateful sahib

İki klassik tələ: (1) remember-siz mutableStateOf — hər recomposition-da state sıfırlanır (sonsuz reset); (2) = ilə yox, by delegate və ya .value ilə oxumaq lazım olduğunu qarışdırmaq. Üçüncüsü müsahibə sualı kimi gəlir: recomposition nə vaxt "çox" olur? — cavab: state oxunuşunu mümkün qədər aşağı endir (yalnız oxuyan composable recompose olsun), unstable parametrlərdən (adi List əvəzinə ImmutableList/stable data class) qaç.

🛠 Tapşırıq

İlk Compose ekranını yaz (mövcud layihəyə ComposeView ilə və ya yeni layihədə):

  • Sayğac düyməsi qur, remember-i unut və dəyərin sıfırlandığını gör; sonra əlavə et.
  • remember ilə rememberSaveable fərqini rotation-da yoxla.
  • Bir TextField-i state hoisting ilə stateless et (value + onValueChange) və @Preview yaz.
  • Siyahını LazyColumn + key = { it.id } ilə qur.

Bitdi sayılır: eyni ekranı XML-də neçə fayl/sətirlə yazdığınla müqayisə edə bilirsənsə.

📚 Mənbələr və sənədlər