android - 如果第一个项目被移动，如何防止 LazyColumn 自动滚动

Question

我使用 Jetpack Compose UI 构建一个简单的 TODO 应用。这个想法是有一个可以选中或不选中的任务列表，选中的任务应该放在列表的末尾。

一切正常，除了当我检查屏幕上的第一个可见项目时，它会随着滚动位置向下移动。

我相信这与LazyListState有关，有这样的功能:

/**
 * When the user provided custom keys for the items we can try to detect when there were
 * items added or removed before our current first visible item and keep this item
 * as the first visible one even given that its index has been changed.
 */
internal fun updateScrollPositionIfTheFirstItemWasMoved(itemsProvider: LazyListItemsProvider) {
    scrollPosition.updateScrollPositionIfTheFirstItemWasMoved(itemsProvider)
}

所以我想禁用这种行为，但我没有找到办法。

---

下面是重现问题的简单代码和截屏视频。当我尝试检查“项目 0”、“项目 1”和“项目 4”时出现此截屏视频中的问题，但在检查“项目 7”和“项目 8”时它按预期工作。

如果您选中或取消选中当前是第一个可见项目的任何项目，它的行为也相同，而不仅仅是该项目在整个列表中的第一个。

class MainActivity : ComponentActivity() {

    @OptIn(ExperimentalFoundationApi::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {

                    val checkItems by remember { mutableStateOf(generate(20)) }

                    LazyColumn() {
                        items(
                            items = checkItems.sortedBy { it.checked.value },
                            key = { item -> item.id }
                        ) { entry ->

                            Row(
                                modifier = Modifier.animateItemPlacement(),
                                verticalAlignment = Alignment.CenterVertically,
                            ) {
                                Checkbox(
                                    checked = entry.checked.value,
                                    onCheckedChange = {
                                        checkItems.find { it == entry }
                                            ?.apply { this.checked.value = !this.checked.value }
                                    }
                                )
                                Text(text = entry.text)
                            }
                        }
                    }
                }
            }
        }
    }
}

data class CheckItem(val id: String, var checked: MutableState<Boolean> = mutableStateOf(false), var text: String = "")

fun generate(count: Int): List<CheckItem> =
    (0..count).map { CheckItem(it.toString(), mutableStateOf(it % 2 == 0), "Item $it") }

Answer 1

自 animateItemPlacement Lazy 项目需要一个唯一的 ID/ key 才能获得动画，可能会牺牲第一个项目，设置它的 key使用其 index位置(无动画)将防止这个问题

   itemsIndexed(
        items = checkItems.sortedBy { it.checked.value },
        key = { index, item -> if (index == 0) index else item.id }
   ) { index, entry ->
        ...
   }