ورق های پایین

اگر می خواهید یک صفحه پایین را پیاده سازی کنید، می توانید از ModalBottomSheet composable استفاده کنید.

می‌توانید از شکاف content استفاده کنید، که از ColumnScope برای چیدمان ورق محتوای قابل ترکیب در یک ستون استفاده می‌کند:

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

گسترش و جمع کردن برگه از نظر برنامه‌ریزی با استفاده از SheetState انجام می‌شود. می توانید از rememberSheetState برای ایجاد نمونه ای از SheetState استفاده کنید که باید با پارامتر sheetState به ModalBottomSheet ارسال شود. SheetState دسترسی به توابع show و hide و همچنین ویژگی های مربوط به وضعیت صفحه فعلی را فراهم می کند. این توابع تعلیق به CoroutineScope نیاز دارند - برای مثال، با استفاده از rememberCoroutineScope - و می‌توانند در پاسخ به رویدادهای UI فراخوانی شوند. مطمئن شوید که 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")
            }
        }
    }
}
MaterialLayoutSnippets.kt