androidx / constraintlayout

ConstraintLayout is an Android layout component which allows you to position and size widgets in a flexible way
Apache License 2.0
1.06k stars 177 forks source link

onSwipe not work when sub composable item with clickable Modifier #850

Open CarefulDeveloper opened 5 months ago

CarefulDeveloper commented 5 months ago

I use MotionLayout(Compose) like this:

MaterialTheme {
    MotionLayout(
        motionScene = MotionScene {
            val mainScreenRef = createRefFor("mainScreen")
            val optionRef = createRefFor("option")

            val start = constraintSet(name = "start") {
                constrain(optionRef) {

                }

                constrain(mainScreenRef) {
                    this.start.linkTo(parent.end)
                    this.translationX = (-72).dp
                    this.scaleX = 0.8f
                    this.scaleY = 0.8f
                    this.customFloat("elevation", 4f)
                    this.customFloat("rounder", 28.0f)
                }
            }
            val end = constraintSet(name = "end") {
                constrain(optionRef) {
                    this.scaleX = 0.8f
                    this.scaleY = 0.8f
                }

                constrain(mainScreenRef) {
                    this.start.linkTo(parent.start)
                    this.top.linkTo(parent.top)
                    this.scaleX = 1f
                    this.scaleY = 1f
                    this.translationX = 0.dp
                    this.customFloat("elevation", 0f)
                    this.customFloat("rounder", 0f)
                }
            }

            defaultTransition(start, end) {
                this.onSwipe = OnSwipe(
                    anchor = mainScreenRef,
                    side = SwipeSide.Start,
                    direction = SwipeDirection.Start
                )
            }
        },
        progress = 0f,
        modifier = Modifier.fillMaxSize()
    ) {

        Box(
            modifier = Modifier
                .fillMaxSize()
                .layoutId("option")
                .border(1.dp, Color.Blue)
        ){
            LazyColumn {
                repeat(100){
                    item {
                        Text(text = "Left Drawer Content ...")
                    }
                }
            }
        }

        Box(
            modifier = Modifier
                .fillMaxSize()
                .layoutId("mainScreen")
                .border(1.dp, Color.Red)
        ){
        }
    }
}

swipe action can work fine: 20240110102832_rec_

If I add Modifier.clickable{}:

// ...
        Box(
            modifier = Modifier
                .fillMaxSize()
                .layoutId("mainScreen")
                .border(1.dp, Color.Red)
                .clickable {  }
        ){
        }
// ...

Swipe action not work now: 20240110102731_rec_