Нижние листы

Пример нижнего окна модального окна в стиле Material Design 3.

Если вы хотите реализовать нижний всплывающий подсказку , вы можете использовать компонент ModalBottomSheet .

Вы можете использовать слот content , который использует ColumnScope для размещения составных элементов содержимого листа в столбце:

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

Состояние контрольной таблицы программно

Для программного разворачивания и сворачивания листа используйте SheetState . Вы можете использовать rememberModalBottomSheetState для создания экземпляра SheetState , который необходимо передать в ModalBottomSheet с параметром sheetState . 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, отображающее контент.