Anonymous
Предварительный просмотр Jetpack для экрана с параметрами SharedTransitionScope, AnimatedVisibilityScope
Сообщение
Anonymous » 23 июн 2024, 16:53
У меня есть реализация для моего экрана, в которой используется переход общих элементов
Код: Выделить всё
}
@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 =
)
}
}
кто-нибудь знает, как решить эту проблему, не имитируя какой-либо параметр, или мне нужно издеваться над ними, чтобы сделать предварительный просмотр экрана? Заранее спасибо
Я может отображать предварительный просмотр для экрана создания сообщения
Подробнее здесь:
https://stackoverflow.com/questions/786 ... imatedvisi
1719150791
Anonymous
У меня есть реализация для моего экрана, в которой используется переход общих элементов [code]} @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) } }) } } } } } } [/code] И я хочу сделать предварительный просмотр этого экрана или содержимого экрана, но не знаю, что нужно использовать для параметра SharedTransitionScope, AnimatedVisibilityScope в предварительном просмотре [code]fun NoteContentPreview() { NotedTheme { NoteContent( state = DummyNote.dummyNoteState, onOrderChange = {}, query = "", onToggleOrderSectionClick = { /*TODO*/ }, onDeleteClick = {}, onUndoClick = { /*TODO*/ }, navigateToAdd = { /*TODO*/ }, navigateToEdit = { _, _ -> /*TODO*/ }, onQueryChange = { }, sharedTransitionScope = , animatedVisibilityScope = ) } } [/code] кто-нибудь знает, как решить эту проблему, не имитируя какой-либо параметр, или мне нужно издеваться над ними, чтобы сделать предварительный просмотр экрана? Заранее спасибо Я может отображать предварительный просмотр для экрана создания сообщения Подробнее здесь: [url]https://stackoverflow.com/questions/78656716/jetpack-compose-preview-for-screen-that-have-sharedtransitionscope-animatedvisi[/url]