Функция ModalBottomSheet

Функция ModalBottomSheet рисует нижний лист, который накрывает основной экран. Закрытие листа обрабатывает параметр onDismissRequest, положение и анимацию задаёт SheetState в параметре sheetState. Содержимое листа передают в лямбду content. Состояние обычно берут из функции rememberModalBottomSheetState.

Синтаксис

ModalBottomSheet(
	onDismissRequest = { },
	sheetState = sheetState,
) {
	content()
}

Параметры

Параметр	Описание
`onDismissRequest`	Лямбда без аргументов. Срабатывает, когда лист нужно закрыть: смахнули вниз или нажали вне листа.
`sheetState`	Состояние листа. Принимает объект класса `SheetState`.
`content`	Лямбда с содержимым листа. Рисуется внутри выдвижной панели.

Пример

Давайте откроем лист по нажатию кнопки:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			val sheetState = rememberModalBottomSheetState()
			val scope = rememberCoroutineScope()
			var open by remember { mutableStateOf(false) }
			Button(onClick = { open = true }) {
				Text(text = "abcde")
			}
			if (open) {
				ModalBottomSheet(
					onDismissRequest = { open = false },
					sheetState = sheetState,
				) {
					Text(text = "12345")
				}
			}
		}
	}
}

На экране по нажатию кнопки снизу выедет лист с текстом "12345".

Пример

Давайте закроем лист методом hide из корутины:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContent {
			val sheetState = rememberModalBottomSheetState()
			val scope = rememberCoroutineScope()
			var open by remember { mutableStateOf(false) }
			Button(onClick = { open = true }) {
				Text(text = "abcde")
			}
			if (open) {
				ModalBottomSheet(
					onDismissRequest = { open = false },
					sheetState = sheetState,
				) {
					Button(onClick = {
						scope.launch {
							sheetState.hide()
							open = false
						}
					}) {
						Text(text = "12345")
					}
				}
			}
		}
	}
}

На экране кнопка внутри листа закроет панель после анимации hide.

Смотрите также

функция rememberModalBottomSheetState,
которая создаёт состояние листа
класс SheetState,
которым управляют показом листа
функция Scaffold,
которая собирает каркас основного экрана
метод show,
который выдвигает лист программно