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

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

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

النتائج

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

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

مصادر إضافية

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