预览版不支持创建 ViewModel

Question

我按照官方guide 创建了viewModel 实例，它运行良好。但是，当@composable 中有任何viewModel 时，Android Studio 将无法呈现预览并且错误代码为ViewModels creation is not supported in Preview。有人有解决办法吗？

附：使用撰写版本1.0.0-alpha06

Answer 1

您可以使用如下所示的方法，该方法将显示在下面推荐的视频中：

@Composable
fun TestView(
    action: MainActions,
    viewModel: OnboardViewModel = getViewModel()
) {
    TestUI(onClick = viewModel.clickMethod())
}

@Composable
fun TestUI(onClick: () -> Unit) {}

@Preview
@Composable
fun TestUIPreview() {
    MaterialTheme() {
        TestUI(onClick = {})
    }
}

在所选时间，此视频中有来自 google 的推荐：https://youtu.be/0z_dwBGQQWQ?t=573

Answer 2

我遇到了完全相同的问题。 解决方案是：使用接口扩展 ViewModel

撰写视图：

@Composable
fun MyScreen(myVm: IMyViewModel = MyViewModel()) {
    Text(text = myVm.getTextA())
}


@Preview()
@Composable
fun MyScreenPreview() {
    MyScreen(myVm = MyViewModelPreview())
}

视图模型：

abstract class IMyViewModel : ViewModel(){
    abstract val dynamicValue: StateFlow<String>
    abstract fun getTextA() : String
}

class MyViewModel : IMyViewModel() {
    private val _dynamicValue: MutableStateFlow<String> = MutableStateFlow("")
    override val dynamicValue: StateFlow<String> = _dynamicValue

    init {
    }

    override fun getTextA(): String {
        return "Details: ${EntityDb.getAllEntities().lastOrNull()?.details}"
    }
}

class MyViewModelPreview(override val dynamicValue: StateFlow<String> =    MutableStateFlow("no data")) : IMyViewModel() {
    override fun getTextA(): String {
        return ""
    }
}

Answer 3

您的所有可组合项都必须是无状态的，当涉及到 ViewModel 时，最好将 viewModel 向下传递。

// Base viewModel contract
interface MainViewModel {
     fun getData(): Data
}

// Real viewModel to use in production
class RealViewModel : MainViewModel {
      override fun getData(): Data = getRealData()
}

// Fake viewModel to use in Previews and Tests 
object FakeViewModel : MainVeiwModel {
      override fun getData(): Data = getFakeData()
}

@Composable
fun Composable(viewModel: MainViewModel) {
    ShowData(viewModel.getData())
}

@Preview
@Composable
fun ComposablePreview() {
    Composable(FakeViewModel)
}

您还可以拥有一个复杂的ViewModel，它有大量的依赖项将被注入到某个地方。在您的层次结构的顶层创建您的 ViewModel 实例，因为它是有意义的。

Answer 4

你可以使用接口和hilt。

interface IMyViewModel {

    fun getTextA() : String

}

@HiltViewModel
class MyViewModel() : ViewModel(), IMyViewModel {
    fun getTextA() : String {
        //do some cool stuff
    }
}

class MyViewModelPreview() : IMyViewModel {
    fun getTextA() : String {
        //do some mock stuff
    }
}

@Composable
fun MyScreen(myVm = hiltViewModel<MyViewModel>()) {
    Text(text = myVm.getTextA())
}


@Preview()
@Composable
fun MyScreenPreview() {
    MyScreen(myVm = MyViewModelPreview())
}

在这一点上，MyViewModel 是一个使用 @HiltViewModel 注释的 IMyViewModel 的实现，hiltViewModel 为您完成所有必需的连接，在预览中您可以使用任何其他简单的模拟实现。

如果您需要为您的视图模型提供一些依赖项，请使用带有匕首注入的注入构造函数（hilt 已经支持）。显然，这种依赖关系应该在您的实际视图模型上进行调整，并且您的预览实现需要只是一个没有其他依赖关系的包装类，因为它们的功能只是满足参数

@HiltViewModel
class MyViewModel @Inject constructor(
    private val myDependencyRepositoryOne: MyDependencyRepositoryOne,
    private val myDependencyRepositoryTwo: MyDependencyRepositoryTwo)
: ViewModel(), IMyViewModel {
    fun getTextA() : String {
        //do some cool stuff
    }
}

Here 是另一个与 compose 中的视图模型注入相关的有用资源

Answer 5

我正在使用什么：

  @Preview(showBackground = true)
    @Composable
    fun DefaultPreview() {
         MyMVIApp1Theme {
           val myViewModel = remember { AppViewModel() }
           Greeting(viewModel = myViewModel,"Android")
         }
    }