ورق پایین جزئی

شما می‌توانید یک برگه پایانی را تا حدی نمایش دهید و سپس به کاربر اجازه دهید آن را به صورت تمام صفحه نمایش دهد یا آن را رد کند.

برای انجام این کار، یک نمونه از SheetState با skipPartiallyExpanded که روی false تنظیم شده است را به ModalBottomSheet خود منتقل کنید.

مثال

این مثال نشان می‌دهد که چگونه می‌توانید از ویژگی 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 کنترل می‌کند که وقتی کاربر سعی می‌کند برگه پایانی را حذف کند، چه اتفاقی بیفتد. در این حالت، فقط برگه را حذف می‌کند.

نتایج

وقتی کاربر برای اولین بار دکمه را فشار می‌دهد، صفحه تا حدی نمایش داده می‌شود:

یک برگه پایینی که در ابتدا فقط بخشی از صفحه را پر می‌کند. کاربر می‌تواند با کشیدن انگشت، صفحه را با آن پر کند یا آن را ببندد.
شکل ۱. صفحه پایینی که تا حدی نمایش داده شده است.

اگر کاربر روی برگه به ​​سمت بالا بکشد، صفحه را پر می‌کند:

یک برگه پایینی که کاربر آن را گسترش داده تا تمام صفحه را پر کند.
شکل ۲. صفحه پایینی تمام صفحه.

منابع اضافی