Jetpack Compose中如何在ViewModel监听DatePickerState日期变更？

核心思路是让ViewModel承担状态管理与业务逻辑职责，Compose仅负责UI渲染与交互事件转发，避免在UI层维护额外状态或处理逻辑。以下是具体实现步骤：

1. 在ViewModel中定义状态与处理逻辑 #

在ViewModel内维护选中日期的状态，并编写日期变更的处理函数，只有当日期实际变化时才执行业务逻辑：

class DatePickerViewModel : ViewModel() {
    // 存储选中的日期毫秒值，初始值可按需设置
    private val _selectedDateMillis = mutableStateOf<Long?>(null)
    val selectedDateMillis = _selectedDateMillis.asState()

    // 处理日期变更的核心函数
    fun handleDateChange(newDate: Long?) {
        if (newDate != _selectedDateMillis.value) {
            _selectedDateMillis.value = newDate
            // 在这里执行日期变更后的业务逻辑，比如数据请求、状态更新等
            executeDateRelatedBusinessLogic(newDate)
        }
    }

    private fun executeDateRelatedBusinessLogic(date: Long?) {
        // 替换为你的实际业务代码
    }
}

2. 在Compose中绑定UI与ViewModel #

在Compose界面中创建DatePicker实例，通过LaunchedEffect监听DatePickerState的日期变化，调用ViewModel的处理函数。这样UI层仅负责转发事件，逻辑完全由ViewModel处理：

@Composable
fun DatePickerScreen(viewModel: DatePickerViewModel = viewModel()) {
    // 初始化DatePickerState，使用ViewModel中存储的初始日期
    val datePickerState = rememberDatePickerState(
        initialSelectedDateMillis = viewModel.selectedDateMillis.value
    )

    // 监听日期变化，触发ViewModel的处理逻辑
    LaunchedEffect(datePickerState.selectedDateMillis) {
        viewModel.handleDateChange(datePickerState.selectedDateMillis)
    }

    // 渲染DatePicker
    DatePicker(state = datePickerState)
}

关于你之前的实现方式 #

你之前在Compose中维护lastDate、newDate的做法，将状态管理与逻辑处理耦合到了UI层，违反了关注点分离原则。ViewModel的核心职责就是处理业务逻辑与状态管理，把这部分逻辑移到ViewModel后，UI层会更简洁，也更便于测试与维护。

内容的提问来源于stack exchange，提问作者Alex Diaz Llagostera