androidandroid-jetpack-composeandroid-jetpack-compose-list

VerticalScroller is not working inside Column widget


I am trying to embed VerticalScroller inside the column widget but scroll behavior is not working.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        Container(alignment = Alignment.TopCenter) {
            Column {
                Padding(padding = 16.dp) {
                    Text(text = "Names")
                }
                VerticalScroller {
                    Column(crossAxisAlignment = CrossAxisAlignment.Center) {
                        (1..100).forEach {
                            Padding(padding = 8.dp) {
                                Text(text = "Name $it")
                            }
                        }
                    }
                }
            }
        }

    }
}

Solution

  • For embedding VerticalScroller inside Column you need to use FlexColumn and then embed VerticalScroller inside flexible function. For "Name List" Text use inflexible

    What is FlexColumn?

    A composable that places its children in a vertical sequence, assigning children heights according to their flex weights.

    To achieve scroll behavior you need to try below code

     Container(alignment = Alignment.TopCenter) {
            FlexColumn {
                inflexible {
                    Padding(padding = 16.dp) {
                        Text(text = "Names List")
                    }
                }
                flexible(flex = 1f) {
                    VerticalScroller {
                        Column {
                            (1..100).forEach {
                                Padding(padding = 8.dp) {
                                    Text(text = "Name $it")
                                }
                            }
                        }
                    }
                }
            }
        }
    

    Check below gif enter image description here