Composable间传数据：collectAsStateWithLifecycle重复触发的解决

1. 重构ViewModel的状态管理 #

原方案用单个ProjectDetail的StateFlow既不支持多选，还会因初始值和更新触发两次收集。改成维护已选项目列表的StateFlow，从根源解决问题：

class ProjectViewModel : ViewModel() {
    // 初始为空的已选项目列表
    private val _selectedProjects = MutableStateFlow<List<ProjectDetail>>(emptyList())
    val selectedProjects = _selectedProjects.asStateFlow()

    // 添加项目时先判重，避免重复加入
    fun addProjectToSelected(project: ProjectDetail) {
        _selectedProjects.value = _selectedProjects.value.toMutableList().apply {
            if (!contains(project)) {
                add(project)
            }
        }
    }

    // 可选：提供移除已选项目的方法
    fun removeProjectFromSelected(project: ProjectDetail) {
        _selectedProjects.value = _selectedProjects.value.filterNot { it == project }
    }
}

2. 调整第一个Composable的点击逻辑 #

点击列表项时调用ViewModel的添加方法，无需自己处理状态：

@Composable
fun ProjectListScreen(viewModel: ProjectViewModel = viewModel()) {
    val projects = // 你的项目数据源
    LazyColumn {
        items(projects) { project ->
            ProjectItem(project) {
                viewModel.addProjectToSelected(project)
            }
        }
    }
}

3. 优化第二个Composable的收集逻辑 #

直接收集已选列表，只有当列表真正变化时才会触发重组，不会出现重复触发：

@Composable
fun SelectedProjectsScreen(viewModel: ProjectViewModel = viewModel()) {
    val selectedProjects by viewModel.selectedProjects.collectAsStateWithLifecycle()
    
    LazyColumn {
        items(selectedProjects) { project ->
            SelectedProjectItem(project) {
                viewModel.removeProjectFromSelected(project)
            }
        }
    }
}

原方案触发两次的原因 #

• 初始时_projectDetailAdded的默认值是null，collectAsStateWithLifecycle会先收集到这个值触发一次重组；
• 点击项目后设置新的ProjectDetail值，再次触发收集，导致两次处理；
• 单个值的设计本身无法支持多选，每次点击都会覆盖之前的选择，不符合需求。

额外注意点 #

• 确保ProjectDetail类正确实现equals和hashCode方法（Kotlin数据类会自动生成），这样判重逻辑才能准确生效；
• 所有状态操作都放在ViewModel中，Composable只负责UI展示和触发操作，避免本地状态和ViewModel状态不一致。

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