使用 Android 与 NestedScrollView 组合时，嵌套滚动不起作用

Question

我有一个父级可组合，可滚动并包含一个子级

AndroidView

。在

AndroidView

里面，有一个

NestedScrollView

。我期望子级

NestedScrollView

能够在父级 composable 之前滚动，但实际上，它无法滚动。这是我的代码：

@Composable
fun TestScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())

    ) {
        AndroidView(
            factory = {
                NestedScrollView(it).apply {
                    ViewCompat.setNestedScrollingEnabled(this, true)

                    layoutParams = FrameLayout.LayoutParams(
                        FrameLayout.LayoutParams.MATCH_PARENT,
                        FrameLayout.LayoutParams.MATCH_PARENT
                    )
                    addView(TextView(it).also { tv ->
                        tv.layoutParams = ViewGroup.MarginLayoutParams(
                            FrameLayout.LayoutParams.WRAP_CONTENT,
                            FrameLayout.LayoutParams.WRAP_CONTENT
                        )
                        tv.text = "Inner scrollable"
                        tv.textSize = 100f
                        tv.setBackgroundColor(Color.Blue.toArgb())
                    })
                }
            }, modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .clipToBounds()
        )


        Divider(color = Color.Red)
        Text(
            text = "Outer scrollable", fontSize = 50.sp, modifier = Modifier
                .fillMaxWidth()
                .height(800.dp)
        )
        Divider(color = Color.Red)
    }

}

我知道我可以将

verticalScroll

添加到

AndroidView

中，但这不符合我的期望，因为它会使

NestedScrollView

大于

AndroidView

。目前，这不是问题，但如果我使用

RecyclerView

而不是

NestedScrollView

，NestedScrollView 中的项目将无法回收，这将是一个严重的问题。

Answer 1

正如我所见，您创建为

NestedScrollView

的

AndroidView

未与 Jetpack Compose 的

scrolling

系统正确集成。您应该使用 Jetpack Compose 自己的

LazyColumn

或

VerticalScrollbar

来实现所需的嵌套滚动行为。

按照代码操作：

    @Composable
    fun TestScreen() {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(rememberScrollState())
        ) {
            // Outer scrollable content
            Text(
                text = "Outer scrollable",
                fontSize = 50.sp,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(800.dp)
            )

            Divider(color = Color.Red)

            // Inner scrollable content
            LazyColumn(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)
            ) {
                items(50) {
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(50.dp)
                            .background(Color.Gray)
                    ) {
                        // Inner scrollable content
                    }
                }
            }
        }
    }

逻辑：

我们正在使用

LazyColumn

为

scrollable

创建一个

inner content

区域。外部和内部内容组织在

Column

内，Jetpack Compose 的滚动系统自动处理

nested scrolling

行为。这将为您提供所需的

nested scroll

功能。