XML布局中ScrollView嵌套ComposeView滚动失效 触摸事件被拦截

问题描述 #

XML布局中嵌套ComposeView时，纯XML场景下的滚动冲突方案全部失效，已尝试以下方案均未解决：

• 重写各层父布局dispatchTouchEvent，强制将触摸事件分发给ComposeView
• 在各层级布局调用requestDisallowInterceptTouchEvent请求禁止父布局拦截事件
  目标：ComposeView可正常响应、处理自身的触摸滚动事件。

原问题布局代码：

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="match_parent"
    android:layout_height="@dimen/size_0"
    android:paddingBottom="@dimen/size_24"
    android:fillViewport="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/contentWrapperLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/top_Component_Layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingStart="@dimen/size_24"
            android:paddingTop="@dimen/size_0"
            android:paddingEnd="@dimen/size_24"
            android:paddingBottom="@dimen/size_32"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.018">

            <androidx.compose.ui.platform.ComposeView
                android:id="@+id/composeView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:paddingBottom="@dimen/size_8"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>

可行解决步骤 #

按顺序排查调整，不需要全部改完，每一步改完测试即可：

1. 先修正ComposeView的高度配置
   不要给内部带滚动容器的ComposeView设置wrap_content高度：Compose中LazyColumn、Modifier.verticalScroll()这类滚动组件在父布局用wrap_content测量时，会直接展开全部内容，自身永远不会触发滚动逻辑，所有滑动事件自然会全部交给外层ScrollView处理。
   给ComposeView设置确定的高度值，或者通过约束限定它的最大高度，保证Compose内容的总高度大于ComposeView自身可视高度，才具备内部滚动的基础条件。
2. 使用Compose官方提供的嵌套滚动互操作接口接管事件
   传统View体系的requestDisallowInterceptTouchEvent不会自动同步到Compose的触摸逻辑中，需要在Compose侧通过NestedScrollConnection主动声明滚动优先级，代码如下：

   composeView.setContent {
       val nestedScrollInterceptor = remember {
           object : NestedScrollConnection {
               override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                   // 手指在Compose滚动区域滑动时，主动告知父布局不要拦截事件
                   composeView.parent?.requestDisallowInterceptTouchEvent(true)
                   return Offset.Zero
               }
           }
       }
   
       // 给Compose中的顶级滚动容器（LazyColumn/滚动Column等）绑定拦截器
       LazyColumn(
           modifier = Modifier.nestedScroll(nestedScrollInterceptor)
       ) {
           // 页面内容
       }
   }
   

3. 自定义外层ScrollView补充拦截判断
   如果前两步调整后仍有偶发冲突，替换原生ScrollView为自定义实现，在拦截阶段判断触摸区域，优先把Compose区域的垂直滑动事件交给Compose处理：

   class ComposeNestedScrollView @JvmOverloads constructor(
       context: Context,
       attrs: AttributeSet? = null
   ) : ScrollView(context, attrs) {
       private var downX = 0f
       private var downY = 0f
   
       override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
           when (ev.action) {
               MotionEvent.ACTION_DOWN -> {
                   downX = ev.x
                   downY = ev.y
                   requestDisallowInterceptTouchEvent(false)
               }
               MotionEvent.ACTION_MOVE -> {
                   val deltaX = abs(ev.x - downX)
                   val deltaY = abs(ev.y - downY)
                   val composeView = findViewById<ComposeView>(R.id.composeView)
                   // 垂直滑动且触摸点落在ComposeView区域内时，不拦截事件
                   if (isTouchInView(composeView, ev.rawX, ev.rawY) && deltaY > deltaX) {
                       return false
                   }
               }
           }
           return super.onInterceptTouchEvent(ev)
       }
   
       private fun isTouchInView(view: View?, rawX: Float, rawY: Float): Boolean {
           view ?: return false
           val viewLocation = IntArray(2)
           view.getLocationOnScreen(viewLocation)
           return rawX in viewLocation[0].toFloat()..(viewLocation[0] + view.width).toFloat()
                   && rawY in viewLocation[1].toFloat()..(viewLocation[1] + view.height).toFloat()
       }
   }
   

   把XML中原生ScrollView替换为这个自定义View即可。

避坑说明 #

不要重写各层父布局的dispatchTouchEvent强制把事件分发给ComposeView，这种做法会破坏Android事件传递的完整序列，会导致Compose拿不到ACTION_UP、ACTION_CANCEL事件，出现滑动卡顿、点击失效、其他View区域触摸无响应的问题。

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