برگ زیرین جزئی

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

برای انجام این کار، نمونه‌ای از 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 نادرست است.
• ModalBottomSheet اصلاح‌گری را می‌گیرد که تضمین می‌کند وقتی کاملاً ازهم باز می‌شود، صفحه‌نمایش را پر کند.
• ‫ModalBottomSheet مقدار sheetState را به‌عنوان مقدار پارامتر sheetState خود می‌گیرد.
  • درنتیجه، برگ وقتی برای اولین‌بار باز می‌شود فقط به‌صورت جزئی نمایش داده می‌شود. سپس کاربر می‌تواند آن را بکشد یا تند بکشد تا تمام‌صفحه شود یا آن را ببندد.
• onDismissRequest لامبدا کنترل می‌کند که وقتی کاربر سعی می‌کند برگ پایین را ببندد چه اتفاقی بیفتد. در این مورد، فقط برگ را برمی‌دارد.

نتایج

وقتی کاربر برای اولین‌بار دکمه را فشار می‌دهد، برگه به‌صورت جزئی نمایش داده می‌شود:

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

منابع بیشتر

• برگ‌های زیرین