Jetpack Compose中DatePicker持续卡顿问题求助

问题详情 #

Jetpack Compose中的DatePicker出现全程卡顿，切换至日历Composable页面时卡顿依旧。即使移除了更新ViewModel的代码段，问题仍未改善。相关代码如下：

//Main box
Box(
    modifier = Modifier
        .fillMaxSize()
        .background(Color(0xff162232))
) {
    //State for date picker
    val datePickerState = remember {
        DatePickerState(
            yearRange = (2024..2041),
            initialSelectedDateMillis = sharedVMCalendarMainScreens.selectedDate,
            initialDisplayMode = DisplayMode.Picker,
            initialDisplayedMonthMillis = null,
        )
    }

    //Update date in main and calendar screens
    val chosenDate = convertMillisToDate(datePickerState.selectedDateMillis!!)
    sharedVMCalendarMainScreens.updateChosenDate(chosenDate)
    sharedVMCalendarMainScreens.updateSelectedDate(datePickerState.selectedDateMillis!!)

    DatePicker(
        state = datePickerState,
        colors = DatePickerDefaults.colors(
            selectedDayContainerColor = Color(0xff85aff7),
            todayDateBorderColor = Color(0xff85aff7),
            todayContentColor = Color(0xff85aff7),

        )
    )
}

移除的代码段：

//Update date in main and calendar screens
val chosenDate = convertMillisToDate(datePickerState.selectedDateMillis!!)
sharedVMCalendarMainScreens.updateChosenDate(chosenDate)
sharedVMCalendarMainScreens.updateSelectedDate(datePickerState.selectedDateMillis!!)

可能的解决方向 #

• 缓存DatePicker颜色配置
  每次Composable重组时都会重新创建DatePickerDefaults.colors实例，额外的对象创建会增加性能开销。用remember缓存颜色配置，避免重复初始化：

  val datePickerColors = remember {
      DatePickerDefaults.colors(
          selectedDayContainerColor = Color(0xff85aff7),
          todayDateBorderColor = Color(0xff85aff7),
          todayContentColor = Color(0xff85aff7),
      )
  }
  
  DatePicker(
      state = datePickerState,
      colors = datePickerColors
  )
  

• 改用rememberSaveable保存DatePicker状态
  若父Composable频繁重组，remember可能无法稳定保存状态，改用rememberSaveable确保状态在配置变更、页面切换时不会重复创建：

  val datePickerState = rememberSaveable {
      DatePickerState(
          yearRange = (2024..2041),
          initialSelectedDateMillis = sharedVMCalendarMainScreens.selectedDate,
          initialDisplayMode = DisplayMode.Picker,
          initialDisplayedMonthMillis = null,
      )
  }
  

• 排查父Composable重组频率
  检查包含该Box的父Composable是否存在频繁重组的情况。可以通过Android Studio的Layout Inspector查看重组轨迹，或添加临时日志确认：

  LaunchedEffect(Unit) {
      println("DatePicker所在Composable重组")
  }
  

  若父组件频繁重组，需定位触发重组的原因（比如不必要的状态更新），优化重组逻辑。

• 升级Compose依赖版本
  部分旧版本的Compose Material3 DatePicker存在已知性能缺陷，升级至最新稳定版可修复此类问题。例如，确保compose-material3依赖为当前最新稳定版本：

  implementation "androidx.compose.material3:material3:1.2.1" // 替换为最新版本
  

• 检查ViewModel状态订阅逻辑
  即使移除了更新代码，若sharedVMCalendarMainScreens.selectedDate的订阅方式不当（比如在父Composable中过度订阅），仍可能触发频繁重组。确认ViewModel中的状态是否仅在必要时更新，且Composable仅订阅所需的状态。

内容的提问来源于stack exchange，提问作者Егор Сауткин