CODEWITHSUNDEEP
androidandroid-jetpack-composelazycolumn
user2291961
user2291961

Reputation: 21

Compose LazyColumn laggy while scrolling

Jetpack Compose version: '1.1.0' and Jetpack Compose component used: androidx.compose.* (base components_ Android Studio Build: 2021.2.1 Kotlin version:1.6.10

I have simple code inside activity. When i start App and start scroll with speed, i see scrolling lags :( What is wrong with this code?

    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        TestComposeTheme {
            val list = (1..300).toList()
            LazyColumn(
                Modifier.fillMaxSize(),
            ) {
                items(list) { item ->
                    SomeItem(
                        text = item.toString(),
                        clickListener = {}
                    )
                    Spacer(modifier = Modifier.height(16.dp))
                }
            }
        }
    }
}


@Composable
fun SomeItem(
    text: String,
    clickListener: (String) -> Unit
) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .height(64.dp)
            .background(Color.LightGray)
            .clickable { clickListener.invoke(text) }
    ) {
        Icon(painter = painterResource(id = R.drawable.ic_back), contentDescription = "")
        Spacer(modifier = Modifier.height(8.dp))
        Text(
            modifier = Modifier,
            text = text
        )

    }
}

Upvotes: 2

Views: 5609

Answers (2)

F on
F on

Reputation: 11

The problem is that you are using an unstable variable in the composable function, which is why the list is redrawn with each change:

//your code
val list = (1..300).toList()

Wrap the value of the variable in remember and then the problem will be solved:

//updated code
val list = remember{(1..300).toList()}

Upvotes: 1

Dev007
Dev007

Reputation: 477

I also got laggy scroll when using lazycolumn (I'm migrating my Native Android project to Jetpack Compose, so i used "ComposeView in XML". Its not a pure Compose project.)

I don't know why the issue coming(Tried with release build also ), but i solved with below code.

Instead of using "LazyColumn", i used "rememberScrollState() with Column"

        Column(
            modifier = Modifier
                .verticalScroll(rememberScrollState())
                .padding(5.dp)
        ) {
            list.forEachIndexed { i, _ ->
                ShowItems(i)
            }
        }

Hope this will help some one. Please attach if better Answer there, I will also update my project.

**

EDIT :: UPDATE

** In release Build, somewhat better then DEBUG app.

  • The above case is only use for less amount of data. If we have large data there is no option we have to use "LazyColumn".

Upvotes: 5

Related Questions