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

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

لإجراء ذلك، مرِّر 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 مضبوطة على false.
• تتلقّى الدالة ModalBottomSheet معدِّلاً يضمن ملء الشاشة عند توسيعها بالكامل.
• تستخدِم ModalBottomSheet القيمة sheetState للمَعلمة sheetState.
  • نتيجةً لذلك، لا يتم عرض الورقة بالكامل عند فتحها لأول مرة. يمكن للمستخدم بعد ذلك سحب الإشعار أو التمرير سريعًا عليه لملء الشاشة أو إغلاقه.
• تتحكّم دالة onDismissRequest Lambda في ما يحدث عندما يحاول المستخدم إغلاق ورقة البيانات السفلية. في هذه الحالة، تتم إزالة الورقة فقط.

النتائج

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

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

مراجع إضافية

• الأوراق السفلية