如何让ComposeView内的LazyRow垂直滚动时触发外层MotionLayout的滚动动画

我之前也遇到过Compose和View系统嵌套滚动的类似问题，尤其是MotionLayout这种需要响应触摸滚动的场景，确实容易踩坑。针对你的需求，给你几个可行的解决方案，一步步来：

方案一：通过Compose嵌套滚动互操作连接传递事件 #

这个方案是利用Compose提供的rememberNestedScrollInteropConnection()，让Compose的滚动事件能正确传递到外层的View系统（也就是你的MotionLayout）。

步骤1：给XML中的ComposeView开启嵌套滚动 #

先确保你的ComposeView在XML里开启了嵌套滚动支持，虽然默认可能已经开启，但加上更保险：

<androidx.compose.ui.platform.ComposeView
    android:id="@+id/banner"
    android:layout_width="0dp"
    android:layout_height="600dp"
    android:nestedScrollingEnabled="true" <!-- 加上这行 -->
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="contentDescription" />

步骤2：在Composable中配置嵌套滚动连接 #

修改你的Banner Composable，给LazyRow添加nestedScroll修饰符，传入互操作连接：

@Composable
fun Banner(modifier: Modifier = Modifier) {
    // 创建Compose与View系统互操作的嵌套滚动连接
    val interopScrollConnection = rememberNestedScrollInteropConnection()
    
    LazyRow(
        modifier = modifier
            .fillMaxSize()
            // 应用嵌套滚动连接，让垂直滚动事件传递到外层View
            .nestedScroll(interopScrollConnection)
    ) {
        items(items = colors) { color ->
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(ComposeColor(color.color))
            ) {
                Text(text = color.color.toString().repeat(5))
            }
        }
    }
}

这个连接会把Compose中未被消费的滚动事件（比如LazyRow不处理的垂直滚动）传递给外层的View系统，这样MotionLayout就能接收到垂直滚动事件并触发动画了。

方案二：在View层拦截触摸事件，手动分发 #

如果方案一没生效，可能是Compose的事件消费逻辑和MotionLayout的触摸处理有冲突，这时候可以在View层（ComposeView）添加触摸监听，手动判断滚动方向，把垂直滚动事件交给MotionLayout处理。

代码实现 #

在你的Activity/Fragment中，给ComposeView设置OnTouchListener：

val bannerView = findViewById<ComposeView>(R.id.banner)
bannerView.setOnTouchListener { v, event ->
    when (event.actionMasked) {
        MotionEvent.ACTION_DOWN -> {
            // 初始按下时，先让Compose处理触摸，阻止父布局拦截
            v.parent.requestDisallowInterceptTouchEvent(true)
        }
        MotionEvent.ACTION_MOVE -> {
            // 计算水平和垂直方向的移动距离
            val deltaX = event.rawX - event.x
            val deltaY = event.rawY - event.y
            
            // 如果垂直移动的距离大于水平，说明是垂直滚动，让父布局（MotionLayout）处理
            if (kotlin.math.abs(deltaY) > kotlin.math.abs(deltaX)) {
                v.parent.requestDisallowInterceptTouchEvent(false)
            }
        }
        MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
            // 触摸结束，恢复父布局的拦截权限
            v.parent.requestDisallowInterceptTouchEvent(false)
        }
    }
    // 返回false，让Compose继续处理触摸事件（比如水平滚动LazyRow）
    false
}

这个方法的核心是：当检测到用户是在垂直滚动时，主动让MotionLayout拦截触摸事件，这样它就能触发你配置的滚动动画；而水平滚动时，还是让LazyRow自己处理。

方案三：自定义MotionLayout的触摸处理（进阶） #

如果上面两个方案都不满足需求，你可以自定义MotionLayout的子类，重写它的触摸事件处理方法，主动监听来自ComposeView的触摸事件。不过这个方法相对复杂，一般前两个方案就能解决问题，这里只做简单说明：

class CustomMotionLayout @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : MotionLayout(context, attrs, defStyleAttr) {
    override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
        // 在这里判断触摸事件是否来自ComposeView，或者是否是垂直滚动
        val isVerticalScroll = /* 计算判断逻辑 */
        if (isVerticalScroll) {
            // 拦截事件，自己处理
            return true
        }
        return super.onInterceptTouchEvent(ev)
    }
}

然后把XML中的MotionLayout替换成这个自定义类即可。

最后验证 #

不管用哪个方案，记得验证你的MotionScene配置是否正确，尤其是OnSwipe的touchAnchorId是否指向了@id/banner，确保MotionLayout能正确响应来自这个View的滚动事件：

<OnSwipe 
    app:dragDirection="dragUp" 
    app:onTouchUp="stop" 
    app:touchAnchorId="@id/banner" />

内容来源于stack exchange