A modern programming language that makes developers happier.

kotlinlang

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

*PairContent*
```@Composable
fun PairContent(
    viewModel: airViewModel,
    scanDeviceList: List&lt;ScanResult&gt;,
) {
    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&lt;ScanResult&gt;,
    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 -&gt;
                Surface {
                    ScanItem(index, scanResult, scanDeviceList)
                }
            }
        }
    }
}```


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.

So Is there any other solution for that ?

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?

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

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() } }` .