如何在 jetpack compose 的 LazyColumn 中添加项目？

Question

In the following viewModel code I am generating a list of items from graphQl server

private val _balloonsStatus =
        MutableStateFlow<Status<List<BalloonsQuery.Edge>?>>(Status.Loading())
    val balloonsStatus get() = _balloonsStatus

private val _endCursor = MutableStateFlow<String?>(null)
    val endCursor get() = _endCursor

init {
        loadBalloons(null)
    }

fun loadBalloons(cursor: String?) {
        viewModelScope.launch {
            val data = repo.getBalloonsFromServer(cursor)
            if (data.errors == null) {
                _balloonsStatus.value = Status.Success(data.data?.balloons?.edges)
                _endCursor.value = data.data?.balloons?.pageInfo?.endCursor
            } else {
                _balloonsStatus.value = Status.Error(data.errors!![0].message)
                _endCursor.value = null
            }
        }
    }

and in the composable function I am getting this data by following this code:

@Composable
fun BalloonsScreen(
    navHostController: NavHostController? = null,
    viewModel: SharedBalloonViewModel
) {

    val endCursor by viewModel.endCursor.collectAsState()
    val balloons by viewModel.balloonsStatus.collectAsState()
    AssignmentTheme {
        Column(modifier = Modifier.fillMaxSize()) {
            when (balloons) {
                is Status.Error -> {
                    Log.i("Reyjohn", balloons.message!!)
                }
                is Status.Loading -> {
                    Log.i("Reyjohn", "loading..")
                }
                is Status.Success -> {
                        BalloonList(edgeList = balloons.data!!, navHostController = navHostController)
                }
            }
            Spacer(modifier = Modifier.weight(1f))
            Button(onClick = { viewModel.loadBalloons(endCursor) }) {
                Text(text = "Load More")
            }
        }
    }

}

@Composable
fun BalloonList(
    edgeList: List<BalloonsQuery.Edge>,
    navHostController: NavHostController? = null,
) {
    LazyColumn {
        items(items = edgeList) { edge ->
            UserRow(edge.node, navHostController)
        }
    }
}

but the problem is every time I click on Load More button it regenerates the view and displays a new set of list, but I want to append the list at the end of the previous list. As far I understand that the list is regenerated as the flow I am listening to is doing the work behind this, but I am stuck here to get a workaround about how to achieve my target here, a kind hearted help would be much appreciated!

Answer 1

You can create a private list in ViewModel that adds List<BalloonsQuery.Edge>?>

and instead of

_balloonsStatus.value = Status.Success(data.data?.balloons?.edges)

you can do something like

_balloonsStatus.value = Status.Success(myLiast.addAll(
data.data?.balloons?.edges))

should update Compose with the latest data appended to existing one