如何观察JetPack中的MutableStateFlow列表组成

Question

我必须在JetPack撰写上实现Google的“位置自动完成”，但问题是，一旦获得了位置列表，我就无法更新UI。

更详细地说，从Google API接收的位置存储在A mutableStateFlow＆lt; mutablelist＆lt; string＆gt;＆gt;＆gt;中，并且状态可通过：databaseviewModel.autococteplaces在可复合函数中观察到。 .CollectasState（）。但是，当将新项目添加到列表中时，可组合函数不是重新编译的

类，可以获取位置：

class AutocompleteRepository(private val placesClient: PlacesClient)
{
    val autocompletePlaces = MutableStateFlow<MutableList<String>>(mutableListOf())

    fun fetchPlaces(query: String) {
        val token = AutocompleteSessionToken.newInstance()

        val request = FindAutocompletePredictionsRequest.builder()
            .setSessionToken(token)
            .setCountry("IT")
            .setQuery(query)
            .build()

        placesClient.findAutocompletePredictions(request).addOnSuccessListener {
                response: FindAutocompletePredictionsResponse ->
            autocompletePlaces.value.clear()
            for (prediction in response.autocompletePredictions) {
                autocompletePlaces.value.add(prediction.getPrimaryText(null).toString())
            }
        }
    }
}

viewModel：

class DatabaseViewModel(application: Application): AndroidViewModel(application) {

    val autocompletePlaces: MutableStateFlow<MutableList<String>>
    val autocompleteRepository: AutocompleteRepository

    init {
        Places.initialize(application, apiKey)
        val placesClient = Places.createClient(application)
        autocompleteRepository = AutocompleteRepository(placesClient)
        autocompletePlaces = autocompleteRepository.autocompletePlaces
    }

    fun fetchPlaces(query: String)
    {
        autocompleteRepository.fetchPlaces(query)
    }
}

可综合函数：编辑：

@Composable
fun dropDownMenu(databaseViewModel: DatabaseViewModel) {

    var placeList = databaseViewModel.autocompletePlaces.collectAsState()
    
    //From here on I don't think it's important, but I'll put it in anyway:
    var expanded by rememberSaveable { mutableStateOf(true) }
    var placeName by rememberSaveable { mutableStateOf("") }

    Column {
        OutlinedTextField(value = placeName, onValueChange =
        { newText ->
            placeName = newText
            databaseViewModel.fetchPlaces(newText)
        })

        DropdownMenu(expanded = expanded,
            onDismissRequest = { /*TODO*/ },
            properties = PopupProperties(
                focusable = false,
                dismissOnBackPress = true,
                dismissOnClickOutside = true)) {
            placeList.value.forEach { item ->
                DropdownMenuItem(text = { Text(text = item) },
                    onClick = {
                        placeName = item
                        expanded = false
                    })
            }
        }
    }
}

编辑： 通过更改解决：mutableStateFlow＆lt; mutablelist＆lt; string＆gt;（mutableListof（）） to mutableStateFlow＆lt; list＆lt; string＆lt; string＆gt;＆gt;＆gt;（Listof（Listof（）） 't了解发生了什么变化，因为列表的结构在上一个代码中也发生了更改

class AutocompleteRepository(private val placesClient: PlacesClient)
{
    val autocompletePlaces = MutableStateFlow<List<String>>(listOf()) //Changed

    fun fetchPlaces(query: String) {
        val token = AutocompleteSessionToken.newInstance()

        val request = FindAutocompletePredictionsRequest.builder()
            .setSessionToken(token)
            .setCountry("IT")
            .setQuery(query)
            .build()

        val temp = mutableListOf<String>()
        placesClient.findAutocompletePredictions(request).addOnSuccessListener {
                response: FindAutocompletePredictionsResponse ->
            for (prediction in response.autocompletePredictions) {
                temp.add(prediction.getPrimaryText(null).toString())
            }
            autocompletePlaces.value = temp //changed
        }
    }
}

Answer 1

在您的旧代码中，您只是通过向其添加项目来更改mutablelist实例 stateflow 。这不会触发更新，因为它仍然是相同的列表（但其中包含额外的值）。

使用新代码，您将stateflow的全部值更改为触发更新的新列表。

您可以将新代码简化为类似：

autocompletePlaces.update { 
  it + response.autocompletePredictions.map { prediction ->
    prediction.getPrimaryText(null).toString()
  } 
}