有没有办法用 StateFlow 参数预览 compose 函数？答案

【问题标题】：Is there a way to preview a compose function with a StateFlow parameter?有没有办法用 StateFlow 参数预览 compose 函数？
【发布时间】：2021-08-25 02:44:18
【问题描述】：

这是我的函数头：

@Composable
@OptIn(ExperimentalMaterialApi::class)
@Preview(showBackground = true)
fun ListPreference(
    title: String = "Title",
    currentValue: StateFlow<String> = MutableStateFlow("C"),
    @PreviewParameter(PreviewTypesProvider::class) types: List<ListPreference>,
    onSelected: ((String) -> Unit)? = null
) {
    val secondaryText by currentValue.collectAsState()

当它尝试渲染预览时，我得到一个错误。如果我删除 currentValue 参数（并注释掉它的用法），它会成功呈现。有没有办法让预览与 StateFlow 参数一起使用？

java.lang.IllegalArgumentException：参数类型不匹配在 java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method) 在 java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) 在 java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) 在 java.base/java.lang.reflect.Method.invoke(Method.java:566) 在 androidx.compose.ui.tooling.CommonPreviewUtils.invokeComposableMethod(CommonPreviewUtils.kt:149) 在 androidx.compose.ui.tooling.CommonPreviewUtils.invokeComposableViaReflection$ui_tooling_release(CommonPreviewUtils.kt:188) 在 androidx.compose.ui.tooling.ComposeViewAdapter$init$3$1$composable$1.invoke(ComposeViewAdapter.kt:571) 在 androidx.compose.ui.tooling.ComposeViewAdapter$init$3$1$composable$1.invoke(ComposeViewAdapter.kt:569) 在 androidx.compose.ui.tooling.ComposeViewAdapter$init$3$1.invoke(ComposeViewAdapter.kt:608) 在 androidx.compose.ui.tooling.ComposeViewAdapter$init$3$1.invoke(ComposeViewAdapter.kt:564) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) 在 androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215) 在 androidx.compose.ui.tooling.InspectableKt.Inspectable(Inspectable.kt:64) 在 androidx.compose.ui.tooling.ComposeViewAdapter$WrapPreview$1.invoke(ComposeViewAdapter.kt:513) 在 androidx.compose.ui.tooling.ComposeViewAdapter$WrapPreview$1.invoke(ComposeViewAdapter.kt:512) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) 在 androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215) 在 androidx.compose.ui.tooling.ComposeViewAdapter.WrapPreview（ComposeViewAdapter.kt:508）在 androidx.compose.ui.tooling.ComposeViewAdapter.access$WrapPreview(ComposeViewAdapter.kt:121) 在 androidx.compose.ui.tooling.ComposeViewAdapter$init$3.invoke(ComposeViewAdapter.kt:564) 在 androidx.compose.ui.tooling.ComposeViewAdapter$init$3.invoke(ComposeViewAdapter.kt:561) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) 在 androidx.compose.ui.platform.ComposeView.Content(ComposeView.android.kt:384) 在 androidx.compose.ui.platform.AbstractComposeView$ensureCompositionCreated$1.invoke(ComposeView.android.kt:228) 在 androidx.compose.ui.platform.AbstractComposeView$ensureCompositionCreated$1.invoke(ComposeView.android.kt:227) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) 在 androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215) 在 androidx.compose.ui.platform.CompositionLocalsKt.ProvideCommonCompositionLocals(CompositionLocals.kt:148) 在 androidx.compose.ui.platform.AndroidCompositionLocals_androidKt$ProvideAndroidCompositionLocals$3.invoke(AndroidCompositionLocals.android.kt:114) 在 androidx.compose.ui.platform.AndroidCompositionLocals_androidKt$ProvideAndroidCompositionLocals$3.invoke(AndroidCompositionLocals.android.kt:113) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) 在 androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215) 在 androidx.compose.ui.platform.AndroidCompositionLocals_androidKt.ProvideAndroidCompositionLocals(AndroidCompositionLocals.android.kt:106) 在 androidx.compose.ui.platform.WrappedComposition$setContent$1$1$3.invoke(Wrapper.android.kt:162) 在 androidx.compose.ui.platform.WrappedComposition$setContent$1$1$3.invoke(Wrapper.android.kt:161) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) 在 androidx.compose.runtime.CompositionLocalKt.CompositionLocalProvider(CompositionLocal.kt:215) 在 androidx.compose.ui.platform.WrappedComposition$setContent$1$1.invoke(Wrapper.android.kt:161) 在 androidx.compose.ui.platform.WrappedComposition$setContent$1$1.invoke(Wrapper.android.kt:144) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107) 在 androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:34) 在 androidx.compose.runtime.ComposerKt.invokeComposable(Composer.kt:3330) 在 androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:2577) 在 androidx.compose.runtime.ComposerImpl$doCompose$2$5.invoke(Composer.kt:2573) 在 androidx.compose.runtime.SnapshotStateKt.observeDerivedStateRecalculations(SnapshotState.kt:540) 在 androidx.compose.runtime.ComposerImpl.doCompose（Composer.kt:2566）在 androidx.compose.runtime.ComposerImpl.composeContent$runtime_release(Composer.kt:2517) 在 androidx.compose.runtime.CompositionImpl.composeContent(Composition.kt:476) 在 androidx.compose.runtime.Recomposer.composeInitial$runtime_release(Recomposer.kt:727) 在 androidx.compose.runtime.CompositionImpl.setContent(Composition.kt:432) 在 androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:144) 在 androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:135) 在 androidx.compose.ui.platform.AndroidComposeView.setOnViewTreeOwnersAvailable(AndroidComposeView.android.kt:727) 在 androidx.compose.ui.platform.WrappedComposition.setContent(Wrapper.android.kt:135) 在 androidx.compose.ui.platform.WrappedComposition.onStateChanged(Wrapper.android.kt:187) 在 androidx.lifecycle.LifecycleRegistry$ObserverWithState.dispatchEvent(LifecycleRegistry.java:354) 在 androidx.lifecycle.LifecycleRegistry.addObserver(LifecycleRegistry.java:196) 在 androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:142) 在 androidx.compose.ui.platform.WrappedComposition$setContent$1.invoke(Wrapper.android.kt:135) 在 androidx.compose.ui.platform.AndroidComposeView.onAttachedToWindow(AndroidComposeView.android.kt:814) 在 android.view.View.dispatchAttachedToWindow(View.java:20479) 在 android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3489) 在 android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3496) 在 android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3496) 在 android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3496) 在 android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3496) 在 android.view.ViewGroup.dispatchAttachedToWindow(ViewGroup.java:3496) 在 android.view.AttachInfo_Accessor.setAttachInfo(AttachInfo_Accessor.java:44) 在 com.android.layoutlib.bridge.impl.RenderSessionImpl.inflate(RenderSessionImpl.java:360) 在 com.android.layoutlib.bridge.Bridge.createSession(Bridge.java:431) 在 com.android.tools.idea.layoutlib.LayoutLibrary.createSession(LayoutLibrary.java:141) 在 com.android.tools.idea.rendering.RenderTask.createRenderSession(RenderTask.java:714) 在 com.android.tools.idea.rendering.RenderTask.lambda$inflate$7(RenderTask.java:870) 在 com.android.tools.idea.rendering.RenderExecutor$runAsyncActionWithTimeout$2.run(RenderExecutor.kt:187) 在 java.base/java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1128) 在 java.base/java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:628) 在 java.base/java.lang.Thread.run(Thread.java:834)

【问题讨论】：

标签： android android-jetpack android-jetpack-compose

【解决方案1】：

您可以定义一个自定义的PreviewParameter 实现接口PreviewParameterProvider。

类似：

class SampleStateFlowProvider: PreviewParameterProvider<MutableStateFlow<String>> {
    override val values = sequenceOf(MutableStateFlow("A"),MutableStateFlow("D"))
    override val count: Int = values.count()
}

@Preview(showBackground = true)
@Composable
fun ListPreferencePreview(@PreviewParameter(SampleStateFlowProvider::class) stateFlow: MutableStateFlow<String>) {
    ListPreference("Title", stateFlow, {/*...*/})
}

@Composable
@OptIn(ExperimentalMaterialApi::class)
fun ListPreference(
    title: String = "Title",
    currentValue: StateFlow<String> = MutableStateFlow("C"),
    onSelected: ((String) -> Unit)? = null
) {
    val secondaryText by currentValue.collectAsState()

    //..Text(currentValue.value)
}

【讨论】：