Jetpack 的 Compose 预览中的焦点状态

Question

我正在尝试为组件的不同状态生成预览，该组件基于 Material TextField。为了使用Showkase和Paparazzi进行快照测试，我想在文本字段聚焦的位置创建预览，从而以不同的颜色渲染不同的轮廓。有什么方法可以达到我想要的结果吗？

我尝试了不同的方法，例如使用 focusRequester，但在渲染预览时没有任何效果。我可以让它工作的唯一方法是启动交互式预览，但这对狗仔队不起作用。

@Preview
@Composable
internal fun TextFieldPreview(
    @PreviewParameter(TextFieldPreviewParameterProvider::class) 
    parameter: TextFieldPreviewParameter
) {
    with(parameter) {
        val focusRequester = remember { FocusRequester() }

        MyTextField(
            value = "Text",
            onValueChange = {},
            isEnabled = isEnabled,
            isPrefilled = isPrefilled,
            isError = isError,
            errorMessage = isError.runIfTrue { "Error message" },
            modifier = Modifier.focusRequester(focusRequester)
        )

        LaunchedEffect(isFocused) {
            if (isFocused){
                focusRequester.requestFocus()
            }
        }
    }
}

internal data class TextFieldPreviewParameter(
    val isFocused: Boolean,
    val isEnabled: Boolean,
    val isPrefilled: Boolean,
    val isError: Boolean,
)

Answer 1

这不适用于预览版，但适用于最新版本的 Paparazzi：

Component(
    // more values...
    interactionSource = object : DefaultMutableInteractionSource {
        override val interactions = flowOf(HoverInteraction.Enter())
    },
)

哪里Component应该是这样的：

@Composable
public fun Component(
    // more arguments...
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
) {
    // code that uses interactionSource to know if the component is hovered or not
}