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

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

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

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