Tweet

Pocket

Composable内でViewModelを使用してPreviewする

小ネタです。

次のようなComposableをViewModelを渡してPreviewしたい場合を考えます。

@Composable
fun FirstScreen(
    viewModel: MainViewModel = hiltViewModel()
) {
    viewModel.getHoge().let { fuga ->
      Text(text = fuga)
    }
}

次のようにPreviewを書くとします。

@Preview
@Composable
fun PreviewFirstScreen() {
    FirstScreen()
}

これではMainViewModelがHiltによってDIされてしまい、MainViewModel内で実際に値を取得してしまいます。
プレビュー用のダミー値を入れたい場合にこれでは困ります。
以下のようにMainViewModelを継承したFakeMainViewModelを用意して、プレビューではそちらを渡すようにします。

@HiltViewModel
open class MainViewModel @Inject constructor() :
    ViewModel() {

    open fun getHoge(): String {
        // リポジトリなどから取得する処理
    }
}

class FakeMainViewModel : MainViewModel() {
    override fun getHoge(): String {
      return "テスト用テキスト"
    }
}

@Preview
@Composable
fun PreviewFirstScreen() {
    FirstScreen(FakeMainViewModel())
}

これで好きな値でプレビューできるようになりました。
検索するとabstruct classを使ってプレビューする方法が見つかるのですが
その方法だとプレビューはできても、アプリを実際に動作させるとDI出来ずにクラッシュします。
open classにせずできるようにしたいのですが・・・今のところこれがワークアラウンドです。

Tweet

Pocket