Где открыть модальный нижний лист в Jetpack Compose? ⇐ Android

[Anonymous]

В моем приложении для Android я использую Карты Google и показываю маркеры на карте. Когда пользователь нажимает на один из маркеров, я хочу открыть модальный нижний лист для отображения сведений о маркере.
Где мне следует реализовать код листа: в верхней части наиболее компонуемого или в компоновочном маркере, который отображает маркер?
Как лучше всего быстро открыть модальный лист?
Вот что я сейчас делаю:
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun A() {
// Sheet state should be handled at the highest relevant level
val sheetState = rememberModalBottomSheetState(
skipPartiallyExpanded = false
)
var showBottomSheet by remember { mutableStateOf(false) }
var selectedMarker by remember { mutableStateOf(null) }

// Handler to be passed down
val onMarkerClick: (MarkerData) -> Unit = { markerData ->
selectedMarker = markerData
showBottomSheet = true
}

// Main content
Box(modifier = Modifier.fillMaxSize()) {
Maps(onMarkerClick = onMarkerClick)

// BottomSheet
if (showBottomSheet) {
ModalBottomSheet(
onDismissRequest = {
showBottomSheet = false
selectedMarker = null
},
sheetState = sheetState
) {
// Sheet content
MarkerDetailContent(
markerData = selectedMarker,
onDismiss = {
showBottomSheet = false
selectedMarker = null
}
)
}
}
}
}

@Composable
fun Maps(
onMarkerClick: (MarkerData) -> Unit
) {
// Map implementation
GoogleMap(
modifier = Modifier.fillMaxSize(),
properties = MapProperties(/*...*/)
) {
Markers(onMarkerClick = onMarkerClick)
}
}

@Composable
fun Markers(
onMarkerClick: (MarkerData) -> Unit
) {
// Marker data (could come from ViewModel)
val markers = remember { /* Your markers data */ }

markers.forEach { markerData ->
Marker(
state = rememberMarkerState(
position = markerData.position
),
onClick = {
onMarkerClick(markerData)
true // consume the event
}
)
}
}

@Composable
fun MarkerDetailContent(
markerData: MarkerData?,
onDismiss: () -> Unit
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Text(
text = "Marker Details",
style = MaterialTheme.typography.headlineSmall,
modifier = Modifier.padding(bottom = 16.dp)
)

markerData?.let {
Text("Title: ${it.title}")
Text("Position: ${it.position}")
// Add more marker details
}

Spacer(modifier = Modifier.height(16.dp))

Button(
onClick = onDismiss,
modifier = Modifier.fillMaxWidth()
) {
Text("Close")
}
}
}

// Data class for markers
data class MarkerData(
val id: String,
val title: String,
val position: LatLng,
// Add other marker properties
)


Подробнее здесь: https://stackoverflow.com/questions/791 ... ck-compose