title: Drag gestures inside scrollable control
body: <p>I've made a custom control based around a Canvas. It uses two <code>.pointerInput</code> modifiers, one to detect click and one to detect drag so the user can toggle a column of 50 buttons, either by clicking on one at a time or dragging across a number of them to set them all at once. It works well, and now I'd like to have a horizontally scrollable Row containing a number of these. The immediate problem is that the Row, when the <code>.horizontalScroll</code> modifier is applied, swallows vertical movement as well, and even taps, so although I can scroll through a number of controls I'm no longer able to interact with them.</p>
  <p>The only example I can find that's similar is the nested scrolling in the <a href="https://developer.android.com/jetpack/compose/gestures#auto-nested-scrolling" rel="nofollow noreferrer">Gestures</a> documentation, but that's between two controls using scrolling, and although the outer control is clearly not preventing the inner control receiving events it's not clear how to apply it in my case.</p>
  <p>Without pasting huge quantities of code, I'm defining the Row by</p>
  <pre><code>@Composable
  fun ScrollBoxes() {
      Row(
          modifier = Modifier
              .background(Color.LightGray)
              .fillMaxSize()
              .horizontalScroll(rememberScrollState())
      ) {
          repeat(20) {
              Column {
                  Text(
                      &quot;Item $it&quot;, modifier = Modifier
                          .padding(2.dp)
                          .width(500.dp)
                  )
                  JetwashSlide(
                      model = JetwashSlideViewModel()
                  )
              }
              
          }
      }
  }
  </code></pre>
  <p>and the modifier of the Canvas is my custom control is set up as</p>
  <pre><code>modifier
          .pointerInput(Unit) {
              detectDragGestures(
                  onDragStart = { ... }
  
                  },
                  onDragEnd = { ... },
                  onDrag = { change, dragAmount -&gt;
                      change.consumeAllChanges();
                      ...
                      }
                  }
              )
          }
          .pointerInput(Unit) {
              detectTapGestures(
                  onPress = { it -&gt;
                      ...
                  }
              )
          }
  </code></pre>
  <p>A crude approach would be to have a scrollable row of labels and use the presently selected label to determine which full width custom control is presently visible. This wouldn't be as aesthetically pleasing as having the controls scrolling horizontally. Does anyone have an idea how this could be achieved?</p>