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

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

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

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

,

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

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

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

,

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

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

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

,

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

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

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