Compose中的DropdownMenu在LazyColum中的每個Morevert圖示中打開

DropdownMenu我在撰寫時遇到問題。問題是當我單擊圖示以顯示選單時，它不僅顯示在單擊的圖示中，而且顯示在每個 morevert 圖示中LazyColum，如下圖所示：

代碼截圖：

var expanded by remember { mutableStateOf(false) }

LazyColumn(contentPadding = PaddingValues(16.dp)) {
                items(items = schedules) { schedule ->
                    TimetableItem(
                        navigator = navigator,
                        viewModel = viewModel,
                        schedule = schedule,
                        expanded = expanded,
                        onExpandedChange = {expanded = it}
                    )
                }
            }

@Composable
    fun TimetableItem(
        navigator: DestinationsNavigator,
        viewModel: TimetableViewModel,
        schedule: TimetableEntity,
        expanded: Boolean,
        onExpandedChange: (Boolean) -> Unit
    ) {
        Card(
            modifier = Modifier
                .padding(bottom = 16.dp)
                .fillMaxSize(),
            shape = RoundedCornerShape(5.dp),
            elevation = 8.dp
        ) {
            Column(
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Box(modifier = Modifier.fillMaxWidth()) {
                    Text(
                        modifier = Modifier
                            .align(Alignment.Center),
                        text = "${schedule.timeFrom}  -  ${schedule.timeTo}",
                        fontSize = 16.sp
                    )
                    IconButton(
                        onClick = { onExpandedChange(true)},
                        modifier = Modifier.align(Alignment.CenterEnd)
                    ) {
                        Icon(
                            imageVector = Icons.Default.MoreVert,
                            contentDescription = stringResource(R.string.more_option)
                        )
                        DropdownMenu(
                            expanded = expanded,
                            onDismissRequest = { onExpandedChange(false) }
                        ) {
                            val options = listOf(R.string.delete_option,R.string.edit_option)
                            options.forEachIndexed { index, option ->
                                DropdownMenuItem(
                                    onClick = {
                                        onExpandedChange(false)
                                        when(index){
                                            0 -> viewModel.onDeleteSchedule(schedule)
                                            1 -> navigator.navigate(AddEditLectureScreenDestination(timetableEntity = schedule))                                    }
                                    }
                                ) { Text(stringResource(option))}
                            }
                        }
    
                    }
                }

uj5u.com熱心網友回復：

由于您有多個下拉選單，因此不能對所有下拉選單使用相同的布爾變數。

在多選的情況下，您需要創建所選專案的串列/地圖，但在這種情況下，只能選擇一個下拉選單，因此您可以像這樣存盤可選的所選專案（或其索引）：

val expandedSchedule = remember { mutableStateOf<TimetableEntity?>(null) }

LazyColumn(contentPadding = PaddingValues(16.dp)) {
    items(items = schedules) { schedule ->
        TimetableItem(
            navigator = navigator,
            viewModel = viewModel,
            schedule = schedule,
            expanded = expandedSchedule == schedule,
            onExpandedChange = { expanded ->
                expandedSchedule = schedule.takeIf { expanded } 
            }
        )
    }
}

uj5u.com熱心網友回復：

你的問題是你所有的ExpandedItems分享都是一樣的expandedState

您還可以簡化代碼：

@Composable
    fun TimetableItem(
        schedule: TimetableEntity,
        expanded: Boolean = false,
        onClick: (index: Int) -> Unit
    ) {
        val expandedState by remember { mutableStateOf(expanded) }
        Card(
            modifier = Modifier
                .padding(bottom = 16.dp)
                .fillMaxSize(),
            shape = RoundedCornerShape(5.dp),
            elevation = 8.dp
        ) {
            Column(
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Box(modifier = Modifier.fillMaxWidth()) {
                    Text(
                        modifier = Modifier
                            .align(Alignment.Center),
                        text = "${schedule.timeFrom}  -  ${schedule.timeTo}",
                        fontSize = 16.sp
                    )
                    IconButton(
                        onClick = { expandedState = true},
                        modifier = Modifier.align(Alignment.CenterEnd)
                    ) {
                        Icon(
                            imageVector = Icons.Default.MoreVert,
                            contentDescription = stringResource(R.string.more_option)
                        )
                        DropdownMenu(
                            expanded = expanded,
                            onDismissRequest = { expandedState = false }
                        ) {
                            val options = listOf(R.string.delete_option,R.string.edit_option)
                            options.forEachIndexed { index, option ->
                                DropdownMenuItem(
                                    onClick = {
                                        expandedState = false
                                        onClick(index)
                                    }
                                ) { Text(stringResource(option))}
                            }
                        }
    
                    }
                }

在這種情況下，您不再需要太多特定引數：

TimeTableItem(
  schedule = schedule,
) { index ->
   when(index){
      0 -> viewModel.onDeleteSchedule(schedule)
      1 ->navigator.navigate(
         AddEditLectureScreenDestination(timetableEntity = schedule)
      )                                    
   }
}

標籤：科特林 android-jetpack-compose

上一篇：引數和回傳型別中函式的Kotlin泛型

下一篇：Mongodb聚合$elemMatch回傳空集