كيف تنشئ 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

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