如何修复 LazyColumn 最后一项点击行为

Question

这是图片

我正在使用 Jetpack Compose，并有一个 LazyColumn，其中最后一项包含可单击字段。当我第一次单击屏幕上可单击字段上的可单击项目（例如文本或图标按钮）时，该列会稍微向上滚动，导致该项目移出视图。这种行为是有问题的，因为它会影响用户体验，特别是在与列表中的最后一项交互时。

详情：

我使用 LazyColumn 来显示项目列表。 列表中的每个项目都有可单击的字段或复选框。 当第一次单击可单击字段时，它会导致 LazyColumn 稍微向上滚动，这是不可取的，因为它会隐藏视图中的项目。

使用 LazyListState 管理滚动位置，并尝试使用 animateScrollToItem() 以编程方式滚动到最后一项。尽管做出了这些努力，但首次单击可单击字段时，LazyColumn 略微向上滚动的问题仍然存在。

这是代码，

@Composable
fun DummyScreen() {

    val state= rememberLazyListState()


    AppTheme {

        Scaffold { contentPadding ->

            LazyColumn(
              state = state,
                modifier = Modifier.padding(contentPadding)
            ) {

                items(3) { index ->
                    Card(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(320.dp)
                            .padding(8.dp)
                            .background(Color.Red)

                    ) {

                        Text(text = "item ${index}",

                            modifier = Modifier.clickable {

                            //TO DO SOME THING
                            }
                        )
                    }
                }

            }
        }
    }

}

Answer 1

您在使用 Jetpack compose 时遇到的这个问题可能是由于系统对 LazyColumn 中可聚焦或可点击项目的反应所致。

使用keyboardScrollPadding

按如下方式更改可点击文本：

Text(
text = "item $index",
modifier = Modifier.clickable(
    indication = null, // Remove ripple effect to avoid focus request
    interactionSource = remember { MutableInteractionSource() }
) {
    
})