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

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

لإجراء ذلك، مرِّر 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 في ما يحدث عندما يحاول المستخدم إغلاق الورقة السفلية. في هذه الحالة، تتم إزالة الورقة فقط.

النتائج

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

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

مراجع إضافية

• أوراق البيانات في أسفل الصفحة