Compose use Flow<T>.collectAsState render List<T> LazyColumn progressive

user_4097210 0
Viewed 1394

I have a file list, need query data from each file, then render Result list to LazyColumn

But I dont want render list until all the query finished, like this:

class Repo {
    private val list = listOf(fileA, fileB)

    fun query(key: String): Flow<List<Result>> 
        = list.asFlow().map{ it.query(key) }.toList()
} 


@Composable
fun ListView(repo: Repo){
    val res = repo.query("xxx").collectAsState(xxx)

    LazyColumn{
        items(res){ xxx }
    }
}

How can I render a LazyColumn from Flow.collectAsState progressive


class Repo {
    private val list = listOf(fileA, fileB)

    fun query(key: String): Flow<Result> 
        = list.asFlow().map{ it.query(key) }
} 

@Composable
fun ListView(repo: Repo){
    val res = repo.query("xxx").collectAsState(xxx)

    LazyColumn{
        // ???
        items(res){ xxx }
    }
}
kotlin-flow android-jetpack-compose kotlin android
1 Answers

Just found derivedStateOf function work perfect for this.


class Repo {
    private val list = listOf(fileA,fileB)

    fun query(key: String): Flow<Result> = list.asFlow().map{xxx}
} 

@Composable
fun ListView(repo: Repo){
    val flow = repo.query("xxx").collectAsState(xxx)

    val update by remember {
        val data = mutableListOf<Result>()

        derivedStateOf {
            flow?.run(data::add)
            data
        }
    }

    LazyColumn {
        items(update) { data: Result ->
            xxxx
        }
    }

}
user_40972100
Related