ورق های پایین

نمونه‌ای از برگه پایانی مودال متریال دیزاین ۳.

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

می‌توانید از بخش content slot) استفاده کنید که از 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 که محتوا را نشان می‌دهد.