Hi, why `Spacer` is not working in simple function...
# compose
k
Hi, why
Spacer
is not working in simple function?
Copy code
Column(
            modifier = Modifier
                .padding(10.dp)
                .fillMaxSize()
                .verticalScroll(rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            PairScreenImage()
            PairDeviceDescription()
            if (viewModel.isBluetoothEnabled) {
                PressAndHoldDescription()
                WaitingToPair(scanning.value)
                UnableToPair(scanning.value)
            } 
        }
WaitingToPair
Copy code
@Composable
fun WaitingToPair(scanning: Boolean) {
    AnimatedVisibility(scanning) {
        Spacer(modifier = Modifier.height(10.dp))
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .background(OffWhite),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
          .... // more item
          }
    }
}
UnableToPair
Copy code
@Composable
fun UnableToPair(scanning: Boolean) {
    AnimatedVisibility(!scanning) {
        Spacer(modifier = Modifier.height(10.dp)
        .... // more item
    }
}
Space is not working properly between views in function. Any reason behind this?
j
Probably the Spacer is behind the row (or viceversa)
You can confirm that if you wrap the Spacer and the Row inside a Column in WaitingToPair
k
Yes it working fine if I wrap
Row
and
Spacer
inside
Column
in
WaitingToPair
function.
But it will duplicate the
Column
in main function and
WaitingToPair
function
I have so many small function where I want to use
Spacer
s
It's because it's inside
AnimatedVisibility
. You can do something like:
Copy code
@Composable
fun ColumnScope.WaitingToPair(...) {
    AnimatedVisibility(scanning) {
        ...
    }
}
AnimatedVisibility
has special versions for
ColumnScope
and
RowScope
, but you're putting it inside a function without that scope
Sorry for all of the edits, I can't type today, apparently.
k
In your above example where should I use
Spacer
? inside
ColumnScope.WaitingToPair
or
AnimatedVisibility(scanning)
?
d
AnimatedVisibility
uses
Layout
to stack all the children. The
ColumnScope
and
RowScope
extension funs are only helping setting the default enter/exit transition that makes sense in the context of Row/Column. All the children will be placed on top of each other like in a
Box
in those variations as well. With that said, here you could either create another Column in AnimatedVisibility or express the Spacer as a
padding
or
offset
on the
Row
.
k
okk perfect got it..
Thank you so much guys
122 Views