State؛ حافظه کوتاه‌مدت UI

اگه UI چیزی یادش نمونه، هر بار مثل ماهی قرمز رفتار می‌کنه.

درس 3 از 12

State یعنی چی؟

State یعنی داده‌ای که وقتی تغییر کند، UI هم باید واکنش نشان دهد. مثلاً شمارنده، متن ورودی، وضعیت باز/بسته بودن کارت و این چیزها.

شمارنده ساده

@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }

    Column {
        Text("تعداد کلیک: $count")
        Button(onClick = { count++ }) {
            Text("یکی بزن روش")
        }
    }
}

خروجی یا نتیجه اجرا

هر بار روی دکمه کلیک می‌شود، عدد روی صفحه یکی زیاد می‌شود.

نکته کاربردی: State قلب UI تعاملی است. اگر state را بد مدیریت کنی، صفحه‌ات مثل آدمی می‌شود که هر پنج ثانیه حافظه‌اش reset می‌شود.

remember کی به درد می‌خوره؟

remember مقدار را بین recompositionها نگه می‌دارد. یعنی وقتی Compose دوباره UI را می‌سازد، مقدار count از صفر شروع نمی‌شود.

نکته کاربردی: این مفهوم برای فرم‌ها، فیلترها، دکمه‌ها و هر چیزی که کاربر تغییر می‌دهد حیاتی است.

نتیجه این درس 🎯

State باعث می‌شود UI زنده باشد. ولی وقتی پروژه بزرگ شود، نگه داشتن همه stateها داخل صفحه خوب نیست؛ برای همین می‌رویم سراغ ViewModel.

تمرین! 🧠

یک دکمه بساز که با هر کلیک متن «روشن» و «خاموش» را عوض کند.

جواب تمرین

@Composable
fun ToggleText() {
    var isOn by remember { mutableStateOf(false) }
    Button(onClick = { isOn = !isOn }) {
        Text(if (isOn) "روشن" else "خاموش")
    }
}

خروجی جواب

با هر کلیک، متن دکمه بین روشن و خاموش تغییر می‌کند.