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

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

Для этого передайте 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. Нижний лист на весь экран.

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