Как отобразить контекстное меню при нажатии на день выбора даты в Jetpack Compose? ⇐ Android

[Anonymous]

Я хочу отображать контекстное меню, когда пользователь нажимает дату в средстве выбора даты. Идея состоит в том, чтобы показать серию действий, которые пользователь может выполнить с этой датой. Затем при нажатии на одно из этих действий к базе данных запускается запрос на основе даты и выбранного параметра.
Это снимок экрана приложения предварительного создания сообщения. Это то, чего я хочу достичь.


В настоящее время средство выбора даты работает, но я не могу отобразить контекстное меню.
Как мне этого добиться?Код
CalendarScreen
@ExperimentalLayoutApi
@ExperimentalCoroutinesApi
@Composable
internal fun CalendarScreen(
viewModel: CalendarViewModel = hiltViewModel()
) {
val selectedTopicId by viewModel.selectedTopicIdd.collectAsStateWithLifecycle()

DatePickerDocked()

}

DatePickerDocked
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DatePickerDocked() {
var showDatePicker by remember { mutableStateOf(true) }
val datePickerState = rememberDatePickerState()
var showMenu by remember { mutableStateOf(false) }

val selectedDate = datePickerState.selectedDateMillis?.let {
convertMillisToDate(it)
} ?: ""

Box(
modifier = Modifier.fillMaxWidth()
) {

if (showMenu) {
Popup(
onDismissRequest = { showDatePicker = false },
alignment = Alignment.TopStart
) {
Box(
modifier = Modifier
.fillMaxWidth()
.offset(y = 64.dp)
.shadow(elevation = 4.dp)
.background(MaterialTheme.colorScheme.surface)
.padding(16.dp)
) {
DropDownDemo()

}
}
}

OutlinedTextField(
value = selectedDate,
onValueChange = {
showMenu = true
},
label = { Text("DOB") },
readOnly = true,
trailingIcon = {
IconButton(onClick = {
showDatePicker = !showDatePicker
}) {
Icon(
imageVector = Icons.Default.DateRange,
contentDescription = "Select date"
)
}
},
modifier = Modifier
.fillMaxWidth()
.height(64.dp)
)

if (showDatePicker) {
//DropDownDemo()
Popup(
onDismissRequest = { showDatePicker = false },
alignment = Alignment.TopStart
) {
Box(
modifier = Modifier
.fillMaxWidth()
.offset(y = 64.dp)
.shadow(elevation = 4.dp)
.background(MaterialTheme.colorScheme.surface)
.padding(16.dp)
) {
if (showMenu) {
Popup(
onDismissRequest = { showDatePicker = false },
alignment = Alignment.TopStart
) {
Box(
modifier = Modifier
.fillMaxWidth()
.offset(y = 64.dp)
.shadow(elevation = 4.dp)
.background(MaterialTheme.colorScheme.surface)
.padding(16.dp)
) {
DropDownDemo()

}
}
}
DatePicker(
state = datePickerState,
showModeToggle = false,

)
}
}
}
}
}

DropDownDemo
@Composable
fun DropDownDemo() {

val isDropDownExpanded = remember {
mutableStateOf(true)
}

val itemPosition = remember {
mutableStateOf(0)
}

val options = listOf(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15)

Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {

Box {
Row(
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.clickable {
isDropDownExpanded.value = true
}
) {
//Text(text = options[itemPosition.value])
Image(
painter = painterResource(id = R.drawable.ic_author),
contentDescription = "DropDown Icon"
)
}
DropdownMenu(
expanded = isDropDownExpanded.value,
onDismissRequest = {
isDropDownExpanded.value = false
}) {
options.forEachIndexed { index, option ->
DropdownMenuItem(text = {
Text(text = "Option ${option}")
},
onClick = {
isDropDownExpanded.value = false
itemPosition.value = index
})
}
}
}

}
}


Подробнее здесь: https://stackoverflow.com/questions/790 ... ker-in-jet