Jetpack 为以 SharedTransitionScope、AnimatedVisibilityScope 作为参数的屏幕撰写预览

Question

我的屏幕有这个使用共享元素转换的实现

}

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun NoteContent(
    state: NoteState,
    query: String,
    onOrderChange: (NoteOrder) -> Unit,
    onToggleOrderSectionClick: () -> Unit,
    onDeleteClick: (Note) -> Unit,
    onUndoClick: () -> Unit,
    navigateToAdd: () -> Unit,
    navigateToEdit: (Int, Int) -> Unit,
    onQueryChange: (String) -> Unit,
    sharedTransitionScope: SharedTransitionScope,
    animatedVisibilityScope: AnimatedVisibilityScope
) {
    val snackbarHostState = remember { SnackbarHostState() }
    val scope = rememberCoroutineScope()
    val staggeredGridState = rememberLazyStaggeredGridState()

    with(sharedTransitionScope){
        Scaffold(
            floatingActionButton = {
                FloatingActionButton(
                    onClick = navigateToAdd, containerColor = MaterialTheme.colorScheme.primary
                ) {
                    Icon(imageVector = Icons.Default.Add, contentDescription = "Add Note")
                }
            },
            snackbarHost = { SnackbarHost(hostState = snackbarHostState) },
        ) { padding ->
            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(horizontal = 8.dp)
            ) {

                Spacer(modifier = Modifier.height(8.dp))

                LazyVerticalStaggeredGrid(
                    state = staggeredGridState,
                    columns = StaggeredGridCells.Fixed(2),
                    modifier = Modifier.fillMaxSize(),
                    contentPadding = PaddingValues(bottom = 4.dp),
                    horizontalArrangement = Arrangement.spacedBy(4.dp),
                    verticalItemSpacing = 4.dp
                ) {
                    item(span = StaggeredGridItemSpan.FullLine) {
                        SearchBar(
                            query = query,
                            onQueryChange = onQueryChange,
                            onToggleOrderSectionClick = onToggleOrderSectionClick
                        )
                    }

                    item(span = StaggeredGridItemSpan.FullLine) {
                        AnimatedVisibility(
                            visible = state.isOrderSectionVisible,
                            enter = fadeIn() + slideInVertically(),
                            exit = fadeOut() + slideOutVertically()
                        ) {
                            OrderRadio(modifier = Modifier
                                .fillMaxWidth()
                                .padding(vertical = 8.dp, horizontal = 8.dp),
                                noteOrder = state.noteOrder,
                                onOrderChange = { order ->
                                    onOrderChange(order)
                                })
                        }
                    }



                    items(state.notes, key = { it.id ?: 0 }) { note ->
                        NoteItem(note = note,
                            modifier = Modifier
                                .padding(4.dp)
                                .fillMaxWidth()
                                .animateItem(
                                    placementSpec = tween(
                                        durationMillis = 300, delayMillis = 0
                                    )
                                )
                                .sharedBounds(
                                    rememberSharedContentState(key = "note/${note.id}"),
                                    animatedVisibilityScope = animatedVisibilityScope,
                                    enter = fadeIn(),
                                    exit = fadeOut(),
                                    resizeMode = SharedTransitionScope.ResizeMode.ScaleToBounds()
                                ), // This line adds the placement animation
                            onDeleteClick = {
                                onDeleteClick(note)
                                scope.launch {
                                    val result = snackbarHostState.showSnackbar(
                                        message = "Note deleted", actionLabel = "Undo"
                                    )
                                    if (result == SnackbarResult.ActionPerformed) {
                                        onUndoClick()
                                    }
                                }
                            },
                            onClick = {
                                note.id?.let { it1 -> navigateToEdit(it1, note.color) }

                            })
                    }
                }
            }
        }

    }
}

我想预览这个屏幕或屏幕的内容，但不知道预览中的 SharedTransitionScope、AnimatedVisibilityScope 参数要做什么

fun NoteContentPreview() {
    NotedTheme {

        NoteContent(
            state = DummyNote.dummyNoteState,
            onOrderChange = {},
            query = "",
            onToggleOrderSectionClick = { /*TODO*/ },
            onDeleteClick = {},
            onUndoClick = { /*TODO*/ },
            navigateToAdd = { /*TODO*/ },
            navigateToEdit = { _, _ -> /*TODO*/ },
            onQueryChange = { },
            sharedTransitionScope = ,
            animatedVisibilityScope =
            )
    }
}

有人知道如何在不模拟任何参数的情况下解决这个问题，或者我必须模拟它们才能预览屏幕？，提前谢谢你

我可以显示撰写屏幕的预览

Answer 1

我面临着与您相同的问题，因为我正在一个每个屏幕都有预览的应用程序上实现共享转换。我找不到更简洁的解决方案，但有效的方法是使用

SharedTransitionLayout{}

和

AnimatedVisibility(true){}

将所有屏幕包装在预览可组合项内，并将范围传递给可组合函数。

为了使其不那么冗长，您可以使可组合屏幕成为

SharedTransitionScope

的扩展功能。

这就是我的样子

@Composable
fun SharedTransitionScope.MenuScreen(animatedVisibilityScope:AnimatedVisibilityScope){}

@Composable
@Preview
private fun Preview_MyScreen() {
    SharedTransitionLayout {
        AnimatedVisibility(visible = true) {
            MyScreen(animatedVisibilityScope = this)
        }
    }
}

有兴趣知道是否有更好的方法来做到这一点。