javakotlinandroid-jetpack-composeandroid-livedatalazycolumn

Use lazycolumn jetpack compose lag more than use recycleview


I just learned jetpack compose and I switched from recycle to lazy column but when I do it it lags much more than recycle

after adding about 100 items to the application the app is lagging, is there any way to reduce the lag for the lazy column? I have set the id for the item and used R8 to build this is code:https://github.com/trongan123/TODOAPP

 val tabs: MutableList<TabItem> = ArrayList<TabItem>().toMutableList()
tabs += TabItem("All") {
    AllItemScreen(
        listAll, openUpdateItemScreen = {
            openUpdateItemScreen()
        }, viewModel = viewModel
    )
}
tabs += TabItem("Pending") {
    PendingItemScreen(listAll.filter { it.status.equals("pending") }, openUpdateItemScreen = {
        openUpdateItemScreen()
    }, viewModel = viewModel)
}
tabs += TabItem("Completed") {
    CompletedItemScreen(
        listAll.filter { it.status.equals("completed") },
        openUpdateItemScreen = {
            openUpdateItemScreen()
        }, viewModel = viewModel
    )
}
val pagerState = rememberPagerState()
Scaffold(
    floatingActionButton = {
        FloatingActionButton(
            onClick = { openAddItemScreen() }
        ) {
            Icon(Icons.Filled.Add, "")
        }
    }
) { padding ->
    val textState = remember { mutableStateOf(TextFieldValue("")) }
    Column(
        modifier = Modifier
            .padding(padding)
    ) {
        SearchView(state = textState, viewModel)
        Spacer(modifier = Modifier.size(16.dp))
        Tabs(
            tabs = tabs, pagerState = pagerState,
            viewModel = viewModel
        )
        TabsContent(tabs = tabs, pagerState = pagerState)
    }
}

AllItemScreen

 Column(
    modifier = Modifier
        .fillMaxSize()

) {
    LazyColumn() {

        items(listAll) { i ->
            ItemList(
                i,
                openUpdateItemScreen = {
                    openUpdateItemScreen()
                }, viewModel
            )
        }
    }
}

ItemList

 val isChecked = remember { mutableStateOf(false) }
Card(
    modifier = Modifier
        .fillMaxWidth()
        .padding(5.dp)
        .clickable {
            if (isChecked.value == true) {
                isChecked.value = false
                viewModel.setClearAll(i.id, false)
                viewModel.setCheckData(i.id, false)
            } else {
                isChecked.value = true
                viewModel.setClearAll(i.id, true)
                viewModel.setCheckData(i.id, true)
            }
        },
    elevation = 5.dp
) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center
    ) {
        Spacer(modifier = Modifier.size(16.dp))
        Row {
            val check: List<Int>? = viewModel.getListMutableCheck().value as List<Int>
            if (check != null) {
                isChecked.value = check.contains(i.id)
            }
            Checkbox(
                checked = isChecked.value,
                onCheckedChange = {
                    isChecked.value = it
                    viewModel.setClearAll(i.id, it)
                    viewModel.setCheckData(i.id, it)
                }
            )
            Spacer(modifier = Modifier.size(16.dp))
            if (!isChecked.value) {
                Text(
                    i.title, modifier = Modifier
                        .padding(top = 10.dp)
                )
            } else Text(
                i.title,
                modifier = Modifier
                    .padding(top = 10.dp),
                style = TextStyle(textDecoration = TextDecoration.LineThrough)
            )
            Spacer(
                Modifier
                    .weight(1f)
                    .fillMaxHeight()
            )
            Image(painter = painterResource(id = R.drawable.ellipsis),
                contentDescription = null,

                modifier = Modifier
                    .clickable {
                        todoItem = i
                        openUpdateItemScreen()
                    }
                    .size(30.dp))
            Spacer(modifier = Modifier.size(10.dp))
        }

    }
}

Solution

  • Jetpack Compose does a lot in Debug mode. you can just simply test your code on Release mode to see power of Jetpack Compose