بناء تطبيق عداد في أقل من 10 دقائق باستخدام Jetpack Compose

دليل شامل لفهم وتنفيذ كود تطبيق العداد البسيط في Android باستخدام Jetpack Compose

في عالم تطوير تطبيقات Android، تعتبر Jetpack Compose واحدة من أحدث وأقوى الأدوات لبناء واجهات المستخدم بسرعة وبشكل جميل. في هذه المقالة، سنتعرف على كود تطبيق Counter بسيط باستخدام Jetpack Compose، وسنشرح كل جزء من الكود لضمان الفهم الكامل. 

ما هو Jetpack Compose؟

Jetpack Compose هي مكتبة حديثة من Google لبناء واجهات المستخدم في تطبيقات Android باستخدام لغة البرمجة Kotlin. يعتمد الإنشاء على مفهوم البرمجة التعريفية، حيث تصف الشكل الذي يجب أن تبدو عليه الواجهة، بدلاً من كيفية إنشائها خطوة بخطوة. وهذا يجعل التعليمات البرمجية أكثر قابلية للقراءة والصيانة.

كيف تطبق هذا الكود في مشروعك؟

شرح الكود البرمجي لتطبيق العداد

سنتعرف على الكود المقدم خطوة بخطوة، موضحين كيفية عمل كل جزء وتفاعله مع الأجزاء الأخرى.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            var count by remember { mutableStateOf(0) }
            Column (
                modifier = Modifier
                    .fillMaxSize(),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally,
            ){
                Text(
                    text = "$count",
                    fontSize = 24.sp,
                    modifier = Modifier.padding(bottom = 16.dp)
                )
                Row {
                    plusData(modifier = Modifier.padding(start = 10.dp), count = count, onCountChange = { newCount ->
                        count = newCount
                    })
                    minusData(modifier = Modifier.padding(start = 10.dp), count = count, onCountChange = { newCount ->
                        count = newCount
                    })
                }
            }
        }
    }
}

@Composable
fun RowScope.plusData(modifier: Modifier = Modifier,count: Int,onCountChange: (Int) -> Unit) {
    OutlinedButton(
        modifier = modifier,
        colors = ButtonDefaults.outlinedButtonColors(
            containerColor = Color.Blue.copy(alpha = 0.8f)
        ),
        border = null,
        shape = RoundedCornerShape(15.dp),
        onClick = {
        onCountChange(count + 1)
    }) {
        Text(
            "+",
            textAlign = TextAlign.Left,
            color = Color.White

        )
    }
}

@Composable
fun RowScope.minusData(modifier: Modifier = Modifier,count: Int,onCountChange: (Int) -> Unit) {
    OutlinedButton(
        modifier = modifier,
        colors = ButtonDefaults.outlinedButtonColors(
            containerColor = Color.Blue.copy(alpha = 0.8f)
        ),
        border = null,
        shape = RoundedCornerShape(15.dp),
        onClick = {
            if (count == 0) {
                null
            } else {
                onCountChange(count-1);
            }
        }) {
        Text(
            "-",
            textAlign = TextAlign.Left,
            color = Color.White

        )
    }
}

شرح كود Counter المكتوبه عن طريق Jetpack Compose

ComponentActivity: هي النشاط الرئيسي الذي يستضيف واجهة المستخدم.

enableEdgeToEdge(): تُستخدم لجعل الواجهة تمتد إلى حواف الشاشة.

setContent { ... }: هنا نقوم ببناء واجهة المستخدم باستخدام Jetpack Compose.

mutableStateOf(0): يُستخدم لتخزين حالة العداد. عندما تتغير هذه القيمة، تقوم Compose تلقائيًا بإعادة رسم الواجهة.

Column و Row: تُستخدم لترتيب العناصر بشكل عمودي وأفقي على التوالي.

Text: يعرض قيمة العداد الحالية.

plusData و minusData: هما دوال قابلة للتركيب (Composable Functions) مسؤولة عن زيادة ونقصان قيمة العداد.

دالة plusData لزيادة العداد

دالة minusData لنقصان العداد