https://kotlinlang.org logo
#compose
Title
# compose
n

nuhkoca

04/03/2022, 6:34 AM
Hello, I have a
LoadingView
that should be centered on the screen but
BoxScope
is not working if I use
CrossFade
animation. It always appears on the left hand corner by default. However, if I do not wrap `Composable`s into
CrossFade
, it is working as expected. Somehow
LoadingView
is losing
BoxScope
. What should I do?
Copy code
Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(it)
        .verticalScroll(scrollState)
) {
    Crossfade(targetState = collectionState) { state ->
        when (state) {
            CollectionState.Loading -> LoadingView()
            ...
        }
    }
}
Copy code
@Composable
private fun BoxScope.LoadingView() {
    Box(modifier = Modifier.align(Alignment.Center)) {
        TRCircularProgressIndicator()
    }
}
a

Albert Chang

04/03/2022, 9:27 AM
Modifier.align()
only works on direct children of a
Box
so you should apply the modifier on
Crossfade
.
n

nuhkoca

04/03/2022, 1:47 PM
You mean applying
align
on
Crossfade
? I don't want other `Composables`(
Error
and
Success
views) to be centered but only
Loading
.
a

Albert Chang

04/03/2022, 2:42 PM
Then use another
Box
in
Crossfade
.
Or use
Modifier.fillMaxSize().wrapContentSize(align = Alignment.Center)
on
LoadingView
.
n

nuhkoca

04/03/2022, 2:55 PM
Only centered horizontally but not vertically
2 Views