ورق های پایین

اگر می خواهید یک صفحه پایین را پیاده سازی کنید، می توانید از 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