实现Shared Transition时，Composables间传递值的最优方式是什么？

你的现有实现是可行的，但可以通过以下几种方式优化，提升代码的可维护性、类型安全性和扩展性：

1. 使用单一状态类整合相关状态 #

将showDetails和selectedValue合并为一个数据类，避免分散的状态变量导致的不一致问题：

SharedTransitionLayout {
    data class ScreenState(
        val isShowingDetails: Boolean = false,
        val selectedValue: String = ""
    )

    var screenState by remember { mutableStateOf(ScreenState()) }

    AnimatedContent(
        targetState = screenState.isShowingDetails,
        label = "basic_transition"
    ) { targetState ->
        if (!targetState) {
            MainContent(
                onShowDetails = { value ->
                    screenState = screenState.copy(
                        isShowingDetails = true,
                        selectedValue = value
                    )
                },
                animatedVisibilityScope = this@AnimatedContent,
                sharedTransitionScope = this@SharedTransitionLayout
            )
        } else {
            DetailsContent(
                onBack = {
                    screenState = screenState.copy(isShowingDetails = false)
                },
                value = screenState.selectedValue,
                animatedVisibilityScope = this@AnimatedContent,
                sharedTransitionScope = this@SharedTransitionLayout
            )
        }
    }
}

优势：

• 相关状态集中管理，避免状态不同步
• 代码更简洁，修改状态时只需更新单一对象

2. 使用密封类实现类型安全的状态切换 #

通过密封类定义屏幕的不同状态，确保显示详情时必然存在选中值，消除空值风险：

SharedTransitionLayout {
    sealed class ScreenState {
        object Main : ScreenState()
        data class Details(val selectedValue: String) : ScreenState()
    }

    var screenState by remember { mutableStateOf<ScreenState>(ScreenState.Main) }

    AnimatedContent(
        targetState = screenState,
        label = "basic_transition"
    ) { currentState ->
        when (currentState) {
            is ScreenState.Main -> {
                MainContent(
                    onShowDetails = { value ->
                        screenState = ScreenState.Details(value)
                    },
                    animatedVisibilityScope = this@AnimatedContent,
                    sharedTransitionScope = this@SharedTransitionLayout
                )
            }
            is ScreenState.Details -> {
                DetailsContent(
                    onBack = {
                        screenState = ScreenState.Main
                    },
                    value = currentState.selectedValue,
                    animatedVisibilityScope = this@AnimatedContent,
                    sharedTransitionScope = this@SharedTransitionLayout
                )
            }
        }
    }
}

优势：

• 类型安全，编译时就能确保详情状态下必有选中值
• 状态切换逻辑更清晰，避免无效状态组合

3. 基于ViewModel的状态管理（适合复杂场景） #

如果你的应用涉及更多业务逻辑或需要状态在配置变更后保留，建议将状态移至ViewModel：

// ViewModel类
class ContentViewModel : ViewModel() {
    sealed class ScreenState {
        object Main : ScreenState()
        data class Details(val selectedValue: String) : ScreenState()
    }

    private val _screenState = MutableStateFlow<ScreenState>(ScreenState.Main)
    val screenState = _screenState.asStateFlow()

    fun showDetails(value: String) {
        _screenState.value = ScreenState.Details(value)
    }

    fun goBackToMain() {
        _screenState.value = ScreenState.Main
    }
}

// 父Composable
SharedTransitionLayout {
    val viewModel: ContentViewModel = viewModel()
    val screenState by viewModel.screenState.collectAsStateWithLifecycle()

    AnimatedContent(
        targetState = screenState,
        label = "basic_transition"
    ) { currentState ->
        when (currentState) {
            ContentViewModel.ScreenState.Main -> {
                MainContent(
                    onShowDetails = viewModel::showDetails,
                    animatedVisibilityScope = this@AnimatedContent,
                    sharedTransitionScope = this@SharedTransitionLayout
                )
            }
            is ContentViewModel.ScreenState.Details -> {
                DetailsContent(
                    onBack = viewModel::goBackToMain,
                    value = currentState.selectedValue,
                    animatedVisibilityScope = this@AnimatedContent,
                    sharedTransitionScope = this@SharedTransitionLayout
                )
            }
        }
    }
}

优势：

• 状态独立于UI生命周期，配置变更后仍保留
• 业务逻辑与UI分离，代码更易测试和维护
• 适合多组件共享状态的复杂场景

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