如何清除导航抽屉中之前选择的项目 (Jetpack Compose)

Question

我有带有多个菜单项的导航抽屉。当我单击任何项目时，它会被选中（收件箱）并带有突出显示的颜色。之后，如果我单击其他一些项目（标记为邮件），它也会以突出显示的颜色被选中。但之前选择的（收件箱）应该被清除（突出显示的颜色应该消失）。

一次只能突出显示一项。在我的例子中，这两个项目都被突出显示为选定的。

@Composable
fun DrawerItem(
  folderItem: NewFolderTableData,
  index: Int,
  navigationState: DrawerState,
  submenuList: ImmutableList<NewFolderTableData> = 
  emptyList<NewFolderTableData>().toImmutableList(),
  onMenuClick: (String)->Unit
) {

  val scope = rememberCoroutineScope()
  var selectedItemIndex by rememberSaveable {
    mutableStateOf("")
  }

  var showMoreSubMenu by rememberSaveable {
    mutableStateOf(false)
  }

  var showInboxSubMenu by rememberSaveable {
    mutableStateOf(false)
  }

  val title = if (folderItem.foldername == Const.MailFolder.TYPE_FOLDER_MAIL_SHOW_MORE) {
    if (!showMoreSubMenu) {
        Const.MailFolder.TYPE_FOLDER_MAIL_SHOW_MORE
    } else {
        Const.MailFolder.TYPE_FOLDER_MAIL_HIDE_MORE
    }
  } else {
    folderItem.foldername
  }

  NavigationDrawerItem(label = {
    Text(text = title)
  }, selected = title == selectedItemIndex, onClick = {
    onMenuClick(folderItem.foldername)
    if (folderItem.foldername == Const.MailFolder.TYPE_FOLDER_MAIL_SHOW_MORE) {
        showMoreSubMenu = !showMoreSubMenu
    } else {
        selectedItemIndex = title
        scope.launch {
            navigationState.close()
        }
    }
  }, icon = {
    val iconId = getFolderIcons(folderItem.foldername)
    if (iconId != -1) {
        Image(
            painterResource(id = iconId),
            contentDescription = folderItem.foldername
        )
    }
}, badge = {
    if (folderItem.foldername.equals(
            Const.MailFolder.TYPE_FOLDER_MAIL_SHOW_MORE,
            ignoreCase = true
        )
    ) {
        if (!showMoreSubMenu) {
            SetRightIcon(vector = Icons.Outlined.KeyboardArrowDown, foldername = folderItem.foldername){
            }
        } else {
            SetRightIcon(vector = Icons.Outlined.KeyboardArrowUp, foldername = folderItem.foldername){
            }
        }
    } else if (folderItem.foldername.equals(
            Const.MailFolder.TYPE_FOLDER_MAIL_INBOX,
            ignoreCase = true
        ) && submenuList.isNotEmpty()
    ) {
        if(!showInboxSubMenu){
            SetRightIcon(vector = Icons.Outlined.KeyboardArrowDown, foldername = folderItem.foldername){
                showInboxSubMenu = !showInboxSubMenu
            }
        }else{
            SetRightIcon(vector = Icons.Outlined.KeyboardArrowUp, foldername = folderItem.foldername){
                showInboxSubMenu = !showInboxSubMenu
            }
        }

    } else if (folderItem.foldername.equals(
            Const.MailFolder.TYPE_FOLDER_MAIL_TRASH,
            ignoreCase = true
        ) || folderItem.foldername.equals(
            Const.MailFolder.TYPE_FOLDER_MAIL_JUNK, ignoreCase = true
        )
    ) {
        SetRightIcon(vector = Icons.Filled.Delete, foldername = folderItem.foldername){
        }
    }else if(folderItem.foldername.equals(Const.MailFolder.TYPE_FOLDER_MAIL_ADD, ignoreCase = true)){
        SetRightIcon(vector = Icons.Filled.Add, foldername = folderItem.foldername){
            
        }
    }

  }, modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)


  )

  AnimatedVisibility(visible = showMoreSubMenu || showInboxSubMenu) {
    DrawSubMenu(subList = submenuList, navigationState)
  } 
}

Answer 1

目前每个

DrawerItem

都有自己的

selectedItemIndex

，可以设置为true。 您应该将该状态提升到

ModalDrawerSheet

，这样它只存在一次。

Answer 2

您现在实现的方式，每个

DrawerItem

都有自己的

selectedItemIndex

。单击该项目后，它将突出显示。但是，单击一个

DrawerItem

不会影响所有其他

selectedItemIndex

的本地

DrawerItem

。

因此，您必须将选择逻辑移至父可组合项中。当您单击

DrawerItem

时，更新父可组合项中选定的索引。
您没有提供任何代码，但我将提供一个通用示例：

// move this declaration from DrawerItem into here
var selectedItemIndex by rememberSaveable {
    mutableStateOf("")
}

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("My Drawer", modifier = Modifier.padding(16.dp))
            Divider()
            DrawerItem(
                selectedItemIndex = selectedItemIndex,
                updateSelectedItemIndex = { newItemIndex ->
                    selectedItemIndex = newItemIndex
                },
                //... other parameters
            )
            // ...other DrawerItem Composables
        }
    }
) {
    // Screen content
}

现在，更新您的

DrawerItem

可组合项的签名，如下所示：

@Composable
fun DrawerItem(
  selectedItemIndex: String,
  updateSelectedItemIndex: (String) -> Unit,
  // ... other parameters
) {

    //..
    onClick = {
        onMenuClick(folderItem.foldername)
        if (folderItem.foldername == Const.MailFolder.TYPE_FOLDER_MAIL_SHOW_MORE) {
            showMoreSubMenu = !showMoreSubMenu
        } else {
            updateSelectedItemIndex(title)  // invoke callback function to update selection in parent
            scope.launch {
                navigationState.close()
            }
        }
    },
    //...
}