Частичный нижний лист

Вы можете частично отобразить нижний лист , а затем позволить пользователю либо развернуть его на весь экран, либо закрыть.

Для этого передайте ModalBottomSheet экземпляр SheetState со свойством skipPartiallyExpanded , установленным в значение false .

Пример

В этом примере показано, как можно использовать свойство sheetState объекта ModalBottomSheet , чтобы сначала отобразить лист только частично: 

@Composable
fun PartialBottomSheet() {
    var showBottomSheet by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = false,
    )

    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Button(
            onClick = { showBottomSheet = true }
        ) {
            Text("Display partial bottom sheet")
        }

        if (showBottomSheet) {
            ModalBottomSheet(
                modifier = Modifier.fillMaxHeight(),
                sheetState = sheetState,
                onDismissRequest = { showBottomSheet = false }
            ) {
                Text(
                    "Swipe up to open sheet. Swipe down to dismiss.",
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
    }
}
BottomSheet.kt

Ключевые моменты кода

В этом примере обратите внимание на следующее:

  • showBottomSheet управляет тем, отображает ли приложение нижний лист.
  • sheetState — это экземпляр SheetState , где skipPartiallyExpanded имеет значение false.
  • ModalBottomSheet принимает модификатор, который обеспечивает заполнение экрана при полном развертывании.
  • ModalBottomSheet принимает sheetState в качестве значения своего параметра sheetState .
    • В результате при первом открытии лист отображается лишь частично. Пользователь может перетащить его или смахнуть, чтобы развернуть на весь экран или скрыть.
  • Лямбда- onDismissRequest управляет действиями, которые пользователь совершает при попытке закрыть нижний лист. В данном случае она просто удаляет лист.

Результаты

Когда пользователь впервые нажимает кнопку, лист отображается частично:

Нижний лист, который изначально занимает только часть экрана. Пользователь может провести пальцем, чтобы заполнить им весь экран, или закрыть его.
Рисунок 1. Частично отображенный нижний лист.

Если пользователь проведет пальцем вверх по листу, он заполнит весь экран:

Нижний лист, который пользователь развернул, чтобы заполнить весь экран.
Рисунок 2. Нижний лист на весь экран.

Дополнительные ресурсы