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

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

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

النتائج

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

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

مراجع إضافية

• اللوحات السفلية