كيف تنشئ Bottom Sheet في Jetpack Compose مثل المحترفين

تصميم Bottom Sheet في Jetpack Compose: من البداية إلى الإتقان
دليل شامل لإنشاء وتخصيص Bottom Sheet بأسلوب عصري.

كيف تنشئ Bottom Sheet تفاعلي في Jetpack Compose بأقل مجهود؟

في عالم تطوير تطبيقات Android باستخدام تقنيه Jetpack Compose الرهيبه، تُعتبر Bottom Sheets واحدة من المكونات الرئيسيه التي تساعد في تحسين وتطوير من تجربة المستخدم. في هذا المقال، سنستعرض كيفية إنشاء وتخصيص Bottom Sheet باستخدام الكود البرمجي المخصص، مع شرح تفصيلي لكل جزء من الأكواد لضمان فهم شامل.

لماذا يعتبر Bottom Sheets مهم ؟

تُعتبر Bottom Sheets واحدة من المكونات الأساسية في تصميم واجهات المستخدم لتطبيقات Android او تطوير تطبيقات الجوال بشكل عام، خاصة عند استعمال مكونات Material Design.حيث يوفر Bottom Sheets العديد من الفوائد التي تعزز من تجربة المستخدم وتجعل التطبيقات أكثر تفاعلية وسهولة في الاستخدام. 

إذا كنت تستخدم Jetpack Compose، فإن تنفيذ Bottom Sheets أصبح أسهل من أي وقت مضى بفضل الأدوات والمكتبات التي توفرها Google. ابدأ باستخدامها اليوم لتحسين تجربة المستخدم في تطبيقاتك!

كود Bottom Sheets في compose

fun TutorialsScreen(modifier: Modifier = Modifier) {
    val sheetState = rememberModalBottomSheetState()
    val scope = rememberCoroutineScope()
    var bottomSheetShow by remember {
        mutableStateOf(false)
    }

    Scaffold { paddingValues ->
        if (bottomSheetShow) {
            ModalBottomSheet(
                sheetState = sheetState,
                onDismissRequest = { bottomSheetShow = false }
            ) {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(15.dp)
                ) {
                    Text("Hi I'm Bottom Sheet")
                    Text("----------")
                    Text("You Can close Bottom From Here")
                    Spacer(modifier = Modifier.height(100.dp))
                    Button(onClick = {
                        scope.launch {
                            sheetState.hide()
                        }.invokeOnCompletion {
                            bottomSheetShow = false
                        }
                    }) {
                        Text("Close")
                    }
                }
            }
        }
        Box(
            contentAlignment = Alignment.Center,
            modifier = modifier
                .padding(paddingValues)
                .fillMaxSize()
        ) {
            Button(onClick = {
                bottomSheetShow = true
            }) {
                Text("Show Bottom Sheet")
            }
        }
    }
}


شرح تفصيلي للكود البرمجي

تعريف الدالة TutorialsScreen

الدالة TutorialsScreen هي الدالة الرئيسية التي تحتوي على واجهة المستخدم الخاصة بالشاشة. يتم تمرير modifier كمعامل اختياري لتخصيص التصميم. هذا يسمح بإعادة استخدام المكون مع تعديلات مختلفة.

إدارة حالة الـ Bottom Sheet

val sheetState = rememberModalBottomSheetState(): يتم استخدام rememberModalBottomSheetState لتذكر حالة الـ Bottom Sheet. هذه الحالة تتحكم في كيفية عرض وإخفاء الـ Bottom Sheet.

val scope = rememberCoroutineScope(): يتم استخدام rememberCoroutineScope لإدارة العمليات غير المتزامنة (coroutines). هذا ضروري لأن إخفاء الـ Bottom Sheet يتطلب عملية غير متزامنة.

var bottomSheetShow by remember { mutableStateOf(false) }: يتم استخدام mutableStateOf لتتبع حالة عرض أو إخفاء الـ Bottom Sheet. عندما يتغير هذا المتغير، يتم إعادة تركيب الواجهة تلقائيًا.

هيكل الشاشة باستخدام Scaffold

Scaffold هو هيكل أساسي لتطبيقات Material Design في Jetpack Compose. يتم استخدامه لتنظيم المكونات المختلفة في الشاشة، مثل AppBar، Bottom Navigation، وغيرها. في هذا المثال، يتم استخدامه لتنظيم الـ Bottom Sheet والمحتوى الرئيسي.

عرض الـ Bottom Sheet

يتم التحقق من حالة bottomSheetShow. إذا كانت true، يتم عرض ModalBottomSheet.

ModalBottomSheet: هذا المكون يعرض الـ Bottom Sheet كطبقة عائمة فوق المحتوى الرئيسي. يحتوي على معاملات مثل sheetState لإدارة الحالة وonDismissRequest الذي يتم استدعاؤه عند محاولة إغلاق الـ Bottom Sheet.

داخل الـ Bottom Sheet، يتم استخدام Column لترتيب العناصر بشكل عمودي. يتم استخدام Text لعرض النصوص و**Button** لإضافة زر لإغلاق الـ Bottom Sheet.

 إغلاق الـ Bottom Sheet

عند النقر على زر "Close"، يتم استخدام scope.launch لإخفاء الـ Bottom Sheet بشكل غير متزامن. يتم استدعاء sheetState.hide() لإخفاء الـ Bottom Sheet.

بعد الانتهاء من الإخفاء، يتم تعيين bottomSheetShow إلى false لإغلاق الـ Bottom Sheet تمامًا.

زر عرض الـ Bottom Sheet

يتم استخدام Box لترتيب العناصر في وسط الشاشة. يحتوي Box على زر "Show Bottom Sheet" الذي عند النقر عليه، يتم تعيين bottomSheetShow إلى true لعرض الـ Bottom Sheet.

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

تعليقات