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

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

لإجراء ذلك، مرِّر إلى 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)
                )
            }
        }
    }
}

النقاط الرئيسية حول الرمز

في هذا المثال، يُرجى ملاحظة ما يلي:

  • يتحكّم showBottomSheet في ما إذا كان التطبيق يعرض البطاقة السفلية.
  • sheetState هو مثيل من SheetState حيث تكون قيمة skipPartiallyExpanded هي false.
  • ModalBottomSheet تأخذ معدِّلاً يضمن ملء الشاشة عند توسيعها بالكامل.
  • تأخذ ModalBottomSheet السمة sheetState كقيمة للمعلمة sheetState الخاصة بها.
    • نتيجةً لذلك، لا يتم عرض ورقة البيانات إلا جزئيًا عند فتحها لأول مرة. يمكن للمستخدم بعد ذلك سحبها أو تمريرها لعرضها بملء الشاشة أو إغلاقها.
  • تتحكّم تعبير lambda onDismissRequest في ما يحدث عندما يحاول المستخدم إغلاق البطاقة السفلية. في هذه الحالة، تتم إزالة الورقة فقط.

النتائج

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

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

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

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

مراجع إضافية