滚动时ExposedDropdownMenuBox频繁重组问题[Jetpack Compose]

这是预期行为吗？ #

在Compose 1.4.0-alpha03版本中，这种频繁重组不是预期行为，而是ExposedDropdownMenuBox实现上的已知问题。它内部的状态管理逻辑存在缺陷，滚动触发的布局变化会误触组件的重组流程，导致无意义的重复渲染。

修复方案 #

• 用remember稳定化状态：将组件的核心状态用remember包裹，避免滚动时的无效状态更新。即使不需要展开功能，也能通过稳定状态减少重组：

  Column(
      modifier = Modifier
          .fillMaxWidth()
          .verticalScroll(rememberScrollState())
  ) {
      (1..100).forEach { _ ->
          val expanded = remember { mutableStateOf(false) }
          ExposedDropdownMenuBox(
              modifier = Modifier.fillMaxWidth(),
              expanded = expanded.value,
              onExpandedChange = { expanded.value = it }
          ) {
              Text(text = "Text")
          }
      }
  }
  

• 自定义替代组件：如果不需要完整的下拉菜单功能，直接用OutlinedTextField（设置为只读）或自定义Row组件替代，避开ExposedDropdownMenuBox的内部状态开销：

  Column(
      modifier = Modifier
          .fillMaxWidth()
          .verticalScroll(rememberScrollState())
  ) {
      (1..100).forEach { _ ->
          OutlinedTextField(
              value = "Text",
              onValueChange = {},
              modifier = Modifier.fillMaxWidth(),
              enabled = false,
              readOnly = true
          )
      }
  }
  

• 升级Compose版本：该问题在1.4.0正式版及后续稳定版本中已被修复，升级到最新稳定版可以彻底解决这个问题。

内容的提问来源于stack exchange，提问作者aglogger