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

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

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

النتائج

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

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

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

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

مصادر إضافية