Jetpack 自定义 DropDownMenu

@Composable
fun DropDownMenu(initPosition: Int, values: List<String>, onValueChange: (String) -> Unit) {
  val expanded = remember { mutableStateOf(false) }
  val itemPosition = remember { mutableIntStateOf(initPosition) }
  Box(
    modifier = Modifier
      .background(Color.White, shape = RoundedCornerShape(RadiusElement))
      .border(
        border = BorderStroke(1.dp, UtilityBackground),
        shape = RoundedCornerShape(RadiusElement)
      )
      .padding(horizontal = SpacingF, vertical = SpacingF)
  ) {
    Row(
      horizontalArrangement = Arrangement.Center,
      verticalAlignment = Alignment.CenterVertically,
      modifier = Modifier.clickableNoEffect {
        expanded.value = true
      }
    ) {
      Text(text = values[itemPosition.intValue], style = contentTextStyle2)
      Spacer(modifier = Modifier.width(SpacingF))
      Image(
        painter = painterResource(id = R.drawable.ic_chevron_down),
        contentDescription = "DropDown Icon"
      )
    }

    DropdownMenu(
      containerColor = Color.White,
      expanded = expanded.value,
      onDismissRequest = {
        expanded.value = false
      }) {

      DropdownMenuItem(

        text = {
          Column(modifier = Modifier.background(Color.White)) {
            values.forEachIndexed { index, it ->
              Text(
                modifier = Modifier
                  .clickableNoEffect {
                    expanded.value = false
                    itemPosition.intValue = index
                  }
                  .background(color = if(itemPosition.intValue==index) ColorBrand5 else Color.White, shape = RoundedCornerShape(RadiusElement))

                  .padding(horizontal = SpacingF, vertical = SpacingF), text = it
              )
            }
          }
        },
        onClick = {
          expanded.value = false
        }
      )
    }
  }
}

@Composable
@Preview
fun DropDownMenuPreview() {
  DropDownMenu(initPosition = 0, values = listOf("1", "2"), onValueChange = {})
}

@Composable
fun DropDownDemo() {

  val isDropDownExpanded = remember {
    mutableStateOf(false)
  }

  val itemPosition = remember {
    mutableStateOf(0)
  }

  val usernames = listOf("Alexander", "Isabella", "Benjamin", "Sophia", "Christopher")

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

    Box {
      Row(
        horizontalArrangement = Arrangement.Center,
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.clickableNoEffect {
          isDropDownExpanded.value = true
        }
      ) {
        Text(text = usernames[itemPosition.value])
        Image(
          painter = painterResource(id = R.drawable.ic_arrow_left_circle),
          contentDescription = "DropDown Icon"
        )
      }
      DropdownMenu(
        containerColor = Color.White,
        expanded = isDropDownExpanded.value,
        onDismissRequest = {
          isDropDownExpanded.value = false
        }) {
//        usernames.forEachIndexed { index, username ->
//          DropdownMenuItem(text = {
//            Text(text = username)
//          },
//            onClick = {
//              isDropDownExpanded.value = false
//              itemPosition.value = index
//            })
//        }
        DropdownMenuItem(

          text = {
            Column(modifier = Modifier.background(Color.White)) {
              usernames.forEachIndexed { index, it ->
                Text(modifier = Modifier.clickableNoEffect {
                  isDropDownExpanded.value = false
                  itemPosition.value = index
                }, text = it)
              }
            }
          },
          onClick = {
            isDropDownExpanded.value = false

          }
        )
      }
    }

  }
}