Android Academy · درس

الحالة باستخدام remember وmutableStateOf

احتفظ بحالة واجهة المستخدم في composables

الحالة باستخدام remember وmutableStateOf درس مجاني في Android Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Android Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Android Academy 4 دروس في المجموع.

ما الحالة؟

الحالة هي أي قيمة يمكن أن تتغير بمرور الوقت، ويجب أن تتفاعل معها واجهة المستخدم — مثل عدّاد، أو محتوى حقل نصي، أو ما إذا كان مربع الاختيار مفعّلًا. عند تغيّر الحالة، يعيد Compose الرسم.

mutableStateOf

تنشئ mutableStateOf قيمة قابلة للمراقبة. وعند الكتابة إليها، يعرف Compose أنه يجب إعادة تشغيل أي عنصر composable قرأها.

val count = mutableStateOf(0)
// read with count.value, write with count.value = 1

لماذا remember؟

يمكن تشغيل العناصر composable مرات كثيرة (إعادة التركيب). وإذا أنشأتم الحالة في كل تشغيل، فستُعاد تهيئتها في كل مرة. تخبر remember Compose بأن يحافظ على القيمة عبر عمليات إعادة التركيب.

val count = remember { mutableStateOf(0) }

المفوّض by

تؤدي قراءة .value وكتابتها في كل موضع إلى زيادة الضوضاء في الشيفرة. يتيح لكم مفوّض الخاصية by في Kotlin التعامل مع الحالة كأنها متغير عادي.

var count by remember { mutableStateOf(0) }
// now use count directly, no .value

عمليات الاستيراد المطلوبة

لاستخدام المفوّض by، تستوردون دوال المساعدة الخاصة بالقراءة والكتابة. ويضيفها Android Studio تلقائيًا.

import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

عنصر عدّاد composable

إليكم عدّادًا يعمل. يؤدي النقر على الزر إلى زيادة count، ويُحدّث Text تلقائيًا.

@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    Button(onClick = { count++ }) {
        Text(text = "Count: $count")
    }
}

القراءة تؤدي إلى التحديث

يكمن السر في أن Text يقرأ count. يسجّل Compose هذه القراءة، ولذلك عند تغيّر count يُعاد تركيب ذلك الجزء فقط، ويعرض القيمة الجديدة.

يمكن للحالة الاحتفاظ بأي نوع

لا تقتصر الحالة على الأرقام. يمكنكم تخزين String أو Boolean أو قائمة أو فئة بيانات من إنشائكم.

var name by remember { mutableStateOf("") }
var isOn by remember { mutableStateOf(false) }

TextField مع الحالة

يحتاج حقل النص القابل للتحرير إلى حالة لقيمته الحالية، بالإضافة إلى رد اتصال لتحديثها.

var text by remember { mutableStateOf("") }
TextField(
    value = text,
    onValueChange = { text = it }
)

الحالة محلية

تعيش الحالة التي أُنشئت باستخدام remember داخل العنصر composable. ويملك استدعاءا Counter() حالتين مستقلتين لكل منهما عدّاد خاص.

مثال كامل

شاشة عدّاد كاملة تجمع كل ما ورد في هذا الدرس.

@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    Column {
        Text(text = "You tapped $count times")
        Button(onClick = { count++ }) {
            Text(text = "Tap")
        }
    }
}

تحقق سريع

لماذا نغلّف mutableStateOf داخل remember؟

مراجعة

أساسيات الحالة:

تنشئ mutableStateOf قيمة قابلة للمراقبة.
تحافظ remember عليها عبر عمليات إعادة التركيب.
تتيح by تجاوز كتابة .value.
تربط قراءة الحالة العنصر composable بالتغييرات التي تطرأ عليها.

الأسئلة الشائعة

هل درس «الحالة باستخدام remember وmutableStateOf» مجاني؟

نعم — نص درس «الحالة باستخدام remember وmutableStateOf» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Android Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Android Academy 4 دروس في المجموع.

ماذا ستتعلم في «الحالة باستخدام remember وmutableStateOf»؟

احتفظ بحالة واجهة المستخدم في composables تتمرن على Android Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Android Academy؟

لا تُشترط خبرة سابقة. Android Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «الحالة باستخدام remember وmutableStateOf»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Android Academy هذا؟

نعم. كل درس في Android Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

الحالة باستخدام remember وmutableStateOf
شرح إعادة التركيب
رفع الحالة
rememberSaveable

← العودة إلى Android Academy