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

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

لإجراء ذلك، مرِّر 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)
                )
            }
        }
    }
}
BottomSheet.kt

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

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

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

النتائج

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

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

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

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

مراجع إضافية