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

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

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

النتائج

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

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

مصادر إضافية

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