使用TextField作为子组件时LazyColumn无法滚动的问题如何解决？

问题根因 #

TextField组件内部默认会消费所有触摸输入事件，无论是否设置了只读/禁用属性，因此在TextField区域触发的滑动事件会被TextField优先拦截，不会向上传递给父级LazyColumn触发滚动，该问题在旧版本的Jetpack Compose和JetBrains Desktop Compose中普遍存在。

解决方案 #

方案1：只读/禁用TextField场景适用

直接通过pointerInput修饰符捕获TextField的拖动事件，不做内部消费，事件会自动向上传递给LazyColumn触发滚动，示例代码如下：

@Composable
fun init() {
    LazyColumn(Modifier.fillMaxSize()) {
        for (i in 0..10) {
            item { 
                Box(Modifier.padding(15.dp)) { 
                    TextField(
                        value = "Hallo$i",
                        onValueChange = {},
                        readOnly = true,
                        modifier = Modifier
                            .fillMaxWidth()
                            .pointerInput(Unit) {
                                detectDragGestures { _, _ -> }
                            }
                    ) 
                } 
            }
        }
    }
}

方案2：可编辑TextField场景适用

如果需要保留TextField的正常输入能力，仅在滚动时禁用事件拦截，可以监听LazyColumn的滚动状态，当列表处于滚动状态时临时调整TextField的响应逻辑：

@Composable
fun init() {
    val scrollState = rememberLazyListState()
    val isScrolling = scrollState.isScrollInProgress
    LazyColumn(
        Modifier.fillMaxSize(),
        state = scrollState
    ) {
        for (i in 0..10) {
            item { 
                Box(Modifier.padding(15.dp)) { 
                    TextField(
                        value = "Hallo$i",
                        onValueChange = {},
                        enabled = !isScrolling,
                        modifier = Modifier.fillMaxWidth()
                    ) 
                } 
            }
        }
    }
}

其他说明 #

如果可以升级依赖版本，将JetBrains Desktop Compose升级到1.4.0以上版本、Jetpack Compose升级到1.4.0以上版本后，官方已经对只读/禁用状态的TextField事件传递逻辑做了优化，默认不会拦截滚动事件，无需额外修改代码即可解决问题。

内容的提问来源于stack exchange，提问作者Zen1000