Jetpack Compose中ViewModel传递导致预览失效的解决方法

方案1：为ViewModel参数添加预览专用默认值 #

如果预览场景完全不需要ViewModel的功能，可以给参数设置默认值，传入空实现或Mock实例：

修改MainNavigation的参数定义，为settingsViewModel添加默认值：

@Composable
fun MainNavigation(
    settingsViewModel: SettingsViewModel = SettingsViewModel(),
    isVisible: Boolean,
    onDismiss: () -> Unit,
    context: Context,
    onResetCounters: () -> Unit
) {
    
}

若SettingsViewModel有构造依赖（如Application或Repository），可创建预览专用的Mock类：

// 预览专用Mock ViewModel
class PreviewSettingsViewModel : SettingsViewModel(/* 传入空依赖或测试实例 */) {
    // 按需重写方法，返回模拟数据
}

// 更新可组合函数默认值
@Composable
fun MainNavigation(
    settingsViewModel: SettingsViewModel = PreviewSettingsViewModel(),
    isVisible: Boolean,
    onDismiss: () -> Unit,
    context: Context,
    onResetCounters: () -> Unit
) {
    
}

此时预览函数无需传入settingsViewModel参数：

@Preview(showBackground = true, name = "Main Navigation Preview")
@Composable
fun PreviewMainNavigation() {
    val context = LocalContext.current

    MainNavigation(
        isVisible = true,
        onDismiss = {},
        context = context,
        onResetCounters = {}
    )
}

方案2：拆分可组合函数为容器层与UI层 #

将依赖ViewModel的逻辑与纯UI展示逻辑分离，预览仅调用纯UI部分：

// 纯UI层：仅处理UI渲染，不依赖ViewModel
@Composable
fun MainNavigationContent(
    isVisible: Boolean,
    onDismiss: () -> Unit,
    context: Context,
    onResetCounters: () -> Unit,
    // 若需ViewModel数据，直接传递具体数据而非ViewModel实例
    // 示例：userSettings: UserSettings
) {
    // 编写UI渲染代码
}

// 容器层：负责获取ViewModel并传递数据给UI层
@Composable
fun MainNavigationContainer(
    isVisible: Boolean,
    onDismiss: () -> Unit,
    context: Context,
    onResetCounters: () -> Unit
) {
    val settingsViewModel: SettingsViewModel = viewModel()
    // 从ViewModel获取所需数据
    // val userSettings = settingsViewModel.userSettings.collectAsState()
    
    MainNavigationContent(
        isVisible = isVisible,
        onDismiss = onDismiss,
        context = context,
        onResetCounters = onResetCounters,
        // userSettings = userSettings.value
    )
}

预览时直接调用纯UI的MainNavigationContent：

@Preview(showBackground = true, name = "Main Navigation Preview")
@Composable
fun PreviewMainNavigation() {
    val context = LocalContext.current

    MainNavigationContent(
        isVisible = true,
        onDismiss = {},
        context = context,
        onResetCounters = {}
        // 若需数据，传入模拟测试数据
        // userSettings = UserSettings.Default
    )
}

方案3：在预览中提供临时ViewModelStoreOwner #

若必须在预览中使用真实ViewModel，可添加临时的ViewModelStoreOwner上下文：

@Preview(showBackground = true, name = "Main Navigation Preview")
@Composable
fun PreviewMainNavigation() {
    val context = LocalContext.current
    // 创建临时ViewModelStoreOwner
    val viewModelStoreOwner = remember {
        object : ViewModelStoreOwner {
            override val viewModelStore = ViewModelStore()
        }
    }
    // 提供上下文并获取ViewModel
    CompositionLocalProvider(LocalViewModelStoreOwner provides viewModelStoreOwner) {
        val settingsViewModel: SettingsViewModel = viewModel()
        
        MainNavigation(
            settingsViewModel = settingsViewModel,
            isVisible = true,
            onDismiss = {},
            context = context,
            onResetCounters = {}
        )
    }
}

该方法仅适用于预览必须依赖ViewModel真实逻辑的场景，否则推荐前两种更简洁的方案。

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