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

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

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

النتائج

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

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

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

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

مراجع إضافية