Jetpack Compose:带有动态列表的“AndroidView”行

Question

在ViewModel中，我维护一个字符串列表。如果将执行< code>onAddTag或< code>onRemoveTag,则将刷新可变状态。这导致了重组。

问题是，如果我使用onRemveTag删除一个元素（例如第三个），更新的列表会在我的“自定义可组合”（已调试）中到达，但渲染只会从列表中删除最后一项。

例：

• 初始列表： 1，2，3，4 -

在LazyListScope.items的文档中，有一个关键参数，它说：

key——代表项目的稳定且唯一的键的工厂。不允许对列表中的多个项目使用同一个键。密钥的类型应该可以通过Android上的捆绑包保存。如果传递了null，列表中的位置将代表键。当您指定键时，滚动位置将根据键来保持，这意味着如果您在当前可见项目之前添加/删除项目，具有给定键的项目将保持为第一个可见项目。

也许Row做了类似的事情，它无法正确决定哪个元素需要删除，哪个元素只保留位置信息。但是如何解决这个问题呢？

我不想在这里使用LazyRow，因为我只有几个项目要渲染。除此之外，我想了解这个问题！：）

视图模型

class MyViewModel : ViewModel() {
   var selectedTags = mutableStateOf(listOf<String>())

   fun onRemoveTag(tag: String) {
      selectedTags.value = selectedTags.value.toMutableList().apply { remove(tag) }
   }

   fun onAddTag(tag: String) {
      selectedTags.value = selectedTags.value.toMutableList().apply { add(tag) }
   }
}
  

主屏幕

fun MainScreen(viewModel: MyViewModel) {
   val selectedTags by remember { viewModel.selectedTags }

   TagRow(tags = selectedTags)
}

自定义组合

@Composable
fun TagRow(
    tags: List<String>,
    modifier: Modifier = Modifier
) {
    Row(modifier = modifier) {
        tags.forEach {
            Text(text = it)
        }
    }
}

希望有人知道如何解决这个问题！

问候，克里斯

根据@Philip的反馈，我准备了一个独立的例子:

@Composable
fun StackOverflowPreview() {
    val tags = remember { mutableStateListOf("1", "2", "3") }

    Row {
        tags.forEach {
            AndroidView(factory = { context ->
                EmojiTextView(context).apply {
                    textAlignment = View.TEXT_ALIGNMENT_CENTER
                    setTextColor(android.graphics.Color.BLACK)
                    layoutParams =
                        LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)
                    text = it
                }
            })
        }
    }

    LaunchedEffect(key1 = tags) {
        delay(2000)
        tags.remove("1")
        
        delay(2000)
        tags.remove("2")
        
        delay(2000)
        tags.remove("3")
    }
}

这里你可以看到我使用了< code>EmojiTextView。如果我用一个基本的< code>Text composable来替换这个视图。它像预期的那样工作。使用< code>EmojiTextView时，项目将始终从右向左移除。

我能够将我的问题缩小到AndroidView集成：

kotlin prettyprint-override">@Preview
@Composable
fun StackOverflowPreview() {
    val tags = remember { mutableStateListOf("1", "2", "3") }

    Row {
        tags.forEach { tag ->
            // does NOT work
            // AndroidView(factory = { TextView(it).apply { text = tag } })

            // works
            AndroidView(factory = { TextView(it) }, update = { v -> v.text = tag })
        }
    }

    LaunchedEffect(key1 = tags) {
        delay(2000)
        tags.remove("1")

        delay(2000)
        tags.remove("2")

        delay(2000)
        tags.remove("3")
    }
}

Answer 1

最后，这里是一个工作示例。

@Preview
@Composable
fun StackOverflowPreview() {
    val tags = remember { mutableStateListOf("1", "2", "3") }

    Row {
        tags.forEach { tag ->
            AndroidView(factory = { TextView(it) }, update = { v -> v.text = tag })
        }
    }

    LaunchedEffect(key1 = tags) {
        delay(2000)
        tags.remove("1")

        delay(2000)
        tags.remove("2")

        delay(2000)
        tags.remove("3")
    }
}

正如@Philip在评论中提到的那样，AndroidView将仅实例化一次，并且需要一种在重组时更新其内部状态的方法。

Answer 2

在主屏幕可组合中，您正在用记住来包装 val 赋值。它会导致列表在重新组合时不会更新，因此请删除那里的记忆。然后，您还在初始化视图模型中的 selectedTags 变量时使用了不太好的方法。您可以在其中直接使用委派，就像您在主要活动中使用的那样（或者看起来是可组合的）。在视图模型中，可以通过可变StateOf（listOf（listOf）将变量初始化为val selectedTags

此外，从 Compose 1.0.1 开始，声明可变列表的更好方法是使用预定义的可变 StateListOf（...），因此不需要使用委派（'by'关键字），并且可以像常规列表对象一样使用它，而无需任何 .value 调用。

只要实施这些你就应该没事了