Início / coding / Perguntas / 77590989
Accepted
MohammadBaqer
Asked: 2023-12-02 23:30:41 +0800 CST

Problema com o Canvas no Jetpack Compose que não limpa o conteúdo desenhado ao definir StateFlow como nulo

  • 772

Atualmente estou trabalhando em um Jetpack Composeprojeto onde implementei um gráfico personalizado usando a CanvasAPI. Estou utilizando a MutableStateFlow<List<Offset>?>para representar uma lista de pontos que desenho no Canvas. A lógica do desenho é tratada no Canvas Composable.

Encontrei um problema ao definir a lista de pontos como nula em meu ViewModeluso _points.emit(null). Apesar de definir os pontos como nulos, o Canvas parece não entender que deve limpar o conteúdo desenhado anteriormente.

Aqui está uma versão simplificada do código relevante:

private val _points = MutableStateFlow<List<Offset>?>(null)
val points: StateFlow<List<Offset>?>
    get() = _points

private fun updatePoints() = uiEventScope.launch {
    val pointList = ArrayList<Offset>()
    // Some logic to populate the list...
    _points.emit(pointList)
}

private fun removePoints() = uiEventScope.launch {
    // Some logic to clear the list or set it to null...
    _points.emit(null)
}

val points by viewModel.points.colectAsState()
Canvas(
    modifier = Modifier.fillMaxSize()
) {
    points?.apply {
        for (i in 0 until points.size - 1) {
            // Drawing logic...
        }
    }
}

Eu esperava que definir os pontos como nulos limparia o Canvas, mas parece que o conteúdo anterior persiste. Eu apreciaria qualquer informação sobre por que isso pode estar acontecendo e como posso garantir que o Canvas limpe seu conteúdo quando estiver StateFlowdefinido como nulo.

Obrigado pela ajuda!

android-jetpack-compose

1 respostas

  1. Best Answer

    Precisamos lidar com o caso em que a lista é nula. Adicionei um retângulo vazio com uma cor de fundo quando for nulo. Você pode alterar isso como quiser. Mas você precisa lidar com a situação em que null é retornado com uma lógica semelhante a esta. Você não adicionou onde coletou o fluxo. Se não estiver usando collectAsStatepode ser necessário adaptar essa lógica de onde você coleta.

    val backgroundColor = MaterialTheme.colorScheme.background 
Canvas(
    modifier = Modifier
        .fillMaxSize()
        .drawBehind {
            if (points.value == null) {
                drawRect(backgroundColor, size = size)
                return@drawBehind
            }
            points.value?.let { pointList ->
                for (i in 0 until pointList.size - 1) {
                    // Drawing logic...  
                } 
            }
        }
) {
 
}
    • 1

relate perguntas