بطاقة سفلية جزئية

يمكنك عرض بطاقة سفلية جزئيًا ثم السماح للمستخدم إما بعرضها في وضع ملء الشاشة أو إغلاقها.

لإجراء ذلك، مرِّر إلى ModalBottomSheet مثيلاً من SheetState مع ضبط skipPartiallyExpanded على false.

مثال

يوضّح هذا المثال كيفية استخدام السمة sheetState في ModalBottomSheet لعرض جزء من ورقة البيانات في البداية:

@Composable
fun PartialBottomSheet() {
    var showBottomSheet by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = false,
    )

    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Button(
            onClick = { showBottomSheet = true }
        ) {
            Text("Display partial bottom sheet")
        }

        if (showBottomSheet) {
            ModalBottomSheet(
                modifier = Modifier.fillMaxHeight(),
                sheetState = sheetState,
                onDismissRequest = { showBottomSheet = false }
            ) {
                Text(
                    "Swipe up to open sheet. Swipe down to dismiss.",
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
    }
}

نقاط رئيسية حول الرمز

في هذا المثال، يُرجى ملاحظة ما يلي:

  • يتحكّم showBottomSheet في ما إذا كان التطبيق يعرض البطاقة السفلية.
  • ‫sheetState هي مثيل لـ SheetState حيث skipPartiallyExpanded غير صحيح.
  • يأخذ ModalBottomSheet مُعدِّلاً يضمن ملء الشاشة عند توسيعه بالكامل.
  • تستخدم الدالة ModalBottomSheet القيمة sheetState لمَعلمة sheetState.
    • نتيجةً لذلك، لا يتم عرض الورقة إلا جزئيًا عند فتحها لأول مرة. ويمكن للمستخدم بعد ذلك سحب الإشعار أو التمرير سريعًا عليه لعرضه في وضع ملء الشاشة أو إغلاقه.
  • تتحكّم دالة onDismissRequest Lambda في ما يحدث عندما يحاول المستخدم إغلاق البطاقة السفلية. في هذه الحالة، ستتم إزالة ورقة البيانات فقط.

النتائج

عندما يضغط المستخدم على الزر لأول مرة، تظهر الورقة جزئيًا:

بطاقة سفلية تملأ في البداية جزءًا من الشاشة فقط يمكن للمستخدم التمرير سريعًا لملء الشاشة به أو إغلاقه
الشكل 1. بطاقة سفلية معروضة جزئيًا

إذا مرّر المستخدم سريعًا للأعلى على البطاقة، ستملأ الشاشة:

بطاقة سفلية وسّعها المستخدم لملء الشاشة
الشكل 2. بطاقة سفلية بملء الشاشة

مراجع إضافية