Hi, I have another question why I need to use another `Column` inside my `ColumnScope.ScanDeviceLis...

# compose

[KotlinLeaner]

Hi, I have another question why I need to use another Column inside my ColumnScope.ScanDeviceList If I removed inside Column form ColumnScope.ScanDeviceList my views are misaligned. Is this because of AnimatedVisibility? If yes, what is the solution for this? I am using AnimatedVisibility because I want to give basic animation’s to my view and it also checking the condition. Many thanks

[KotlinLeaner]

PairContent

@Composable
fun PairContent(
    viewModel: airViewModel,
    scanDeviceList: List<ScanResult>,
) {
    AnimatedVisibility(visible = true) {
        AppBarScaffold() {
            Column(
                modifier = Modifier
                    .padding(10.dp)
                    .fillMaxSize()
                    .verticalScroll(rememberScrollState()),
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                if (viewModel.isBluetoothEnabled) {
                    ScanDeviceList(scanDeviceList, modifier = Modifier.align(Alignment.Start))
                } else {
                  // more condition
                }
            }
        }
    }
}

ScanDeviceList

@Composable
fun ColumnScope.ScanDeviceList(
    scanDeviceList: List<ScanResult>,
    modifier: Modifier = Modifier,
) {
    Spacer(modifier = Modifier.height(10.dp))
    AnimatedVisibility(
        scanDeviceList.isNotEmpty(),
        modifier = modifier
    ) {
        Column {
            Text(text ="xyz")
            Spacer(
                modifier = Modifier.height(10.dp)
            )
            scanDeviceList.forEachIndexed { index, scanResult ->
                Surface {
                    ScanItem(index, scanResult, scanDeviceList)
                }
            }
        }
    }
}

[Stylianos Gakis]

Yes, the ColumnScope applies to the top level items.
Those items in that second snippet is Spacer and AnimatedVisibility.
There’s nothing telling the inside items of AnimatedVisibility that they are inside a ColumnScope.

[KotlinLeaner]

So Is there any other solution for that ?

[Stylianos Gakis]

Not that I am aware of. Putting another column inside is fine though, is it a problem since it does not inherit the properties of the outer column?

[KotlinLeaner]

Yes if I didn't put it another column then my all view palce together

[KotlinLeaner]

Like this

[KotlinLeaner]

Text + spacer + for each column item 1,2

[KotlinLeaner]

Etc..

[Doris Liu]

AnimatedVisibility places all the children in a Box-like layout. If you want the children to be laid out vertically, you'll need to have a Column to host the children, which is effectively AnimatedVisibility { Column { children() } } .