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

نمونه‌ای از برگ زیرین مشروط Material Design 3.

اگر می‌خواهید برگه‌ای از پایین پیاده‌سازی کنید، می‌توانید از ترکیب‌پذیر ModalBottomSheet استفاده کنید.

می‌توانید از جایگاه content استفاده کنید که از ColumnScope برای چیدن عناصر ترکیبی محتوای برگ در ستون استفاده می‌کند:

ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {
    // Sheet content
}

کنترل وضعیت برگ به‌صورت برنامه‌ریزی‌شده

برای ازهم بازکردن و جمع کردن برگ به‌صورت برنامه‌ریزی‌شده، از SheetState استفاده کنید. می‌توانید از rememberModalBottomSheetState برای ایجاد نمونه‌ای از SheetState استفاده کنید که باید با پارامتر sheetState به ModalBottomSheet ارسال شود. ‫SheetState دسترسی به عملکردهای show و hide و همچنین دارایی‌های مربوط به وضعیت برگ کنونی را فراهم می‌کند. این توابع تعلیق‌کننده به CoroutineScope نیاز دارند — برای مثال، استفاده از rememberCoroutineScope — و می‌توانید آن‌ها را در پاسخ به رویدادهای واسط کاربر فراخوانی کنید. حتماً ModalBottomSheet را پس‌از پنهان کردن برگه پایین از ترکیب بردارید.

val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Scaffold(
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show bottom sheet") },
            icon = { Icon(Icons.Filled.Add, contentDescription = "") },
            onClick = {
                showBottomSheet = true
            }
        )
    }
) { contentPadding ->
    // Screen content

    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = {
                showBottomSheet = false
            },
            sheetState = sheetState
        ) {
            // Sheet content
            Button(onClick = {
                scope.launch { sheetState.hide() }.invokeOnCompletion {
                    if (!sheetState.isVisible) {
                        showBottomSheet = false
                    }
                }
            }) {
                Text("Hide bottom sheet")
            }
        }
    }
}

برگ زیرین مشروط در Jetpack Compose که محتوا را نشان می‌دهد.