为什么我有时需要在列表中使用 key()？

我有一个带有一些可变状态列表的组件。我将其中的一个项目和删除该项目的回调传递给另一个组件。

@Composable
fun MyApp() {
  val myItems = mutableStateListOf("1", "2", "3")
  LazyColumn {
    items(myItems) { item ->
      MyComponent(item) { toDel -> myItems.remove(toDel) }
    }
  }
}

组件调用Modifier 中的delete回调clickable。

@Composable
fun MyComponent(item: String, delete: (String) -> Unit = {}) {
  Column {
    Box(
      Modifier
        .size(200.dp)
        .background(MaterialTheme.colors.primary)
        .clickable { delete(item) }
    ) {
      Text(item, fontSize = 40.sp)
    }
  }
}

这工作正常。但是当我更改clickable我自己的 Modifier 时，pointerInput()就会出现问题。

fun Modifier.myClickable(delete: () -> Unit) =
  pointerInput(Unit) {
    awaitPointerEventScope { awaitFirstDown() }
    delete()
  }

@Composable
fun MyComponent(item: String, delete: (String) -> Unit = {}) {
  Column {
    Box(
      Modifier
        .size(200.dp)
        .background(MaterialTheme.colors.primary)
        .myClickable { delete(item) } // NEW
    ) {
      Text(item, fontSize = 40.sp)
    }
  }
}

如果我单击第一个项目，它将删除它。接下来，如果我单击最新的顶部项目，则会调用现在已删除的第一个项目的旧回调，尽管旧组件已被删除。

我不知道为什么会发生这种情况。但我可以解决它。我使用key()：

@Composable
fun MyApp() {
  val myItems = mutableStateListOf("1", "2", "3")
  LazyColumn {
    items(myItems) { item ->
      key(item) { // NEW
        MyComponent(item) { toDel -> myItems.remove(toDel) }
      }
    }
  }
}

那么key()当我使用自己的修饰符时为什么需要呢？来自jetpack 的这段代码也是这种情况，我不知道为什么。

正如接受的答案所说，Compose 不会重新计算我的自定义修饰符，因为pointerEvent()它没有唯一的键。

fun Modifier.myClickable(key:Any? = null, delete: () -> Unit) =
  pointerInput(key) {
    awaitPointerEventScope { awaitFirstDown() }
    delete()
  }

和

    Box(
      Modifier
        .size(200.dp)
        .background(MaterialTheme.colors.primary)
        .myClickable(key = item) { delete(item) } // NEW
    ) {
      Text(item, fontSize = 40.sp)
    }

修复它，我不需要key()在外部组件中使用。但是，我仍然不确定为什么不需要向 发送唯一密钥clickable {}。