Hey guys, I need your help by finding a solution f...

# compose

[Michael Bichlmeier]

Hey guys, I need your help by finding a solution for my layout issue. I have a row or list item (doesn’t care at the moment) with different layouts and different click areas.
1. Click area of the Text should be from parent.start until Divider
2. Text and Divider+Icon have to be centered with 5% spacing to start and end
3. Icon has his own click area
I will post an example code snippet in the thread. I’m very interested in your ideas how to do this in a “simple” way 😉

[Michael Bichlmeier]

@Composable
fun ClickItem() {
    // TODO a click box from parent.start to Divider to delegate Text click event
    ConstraintLayout(modifier = Modifier.fillMaxWidth(0.9F)) {
        val (text, collapsable) = createRefs()

        Text(text = "I am clickable",
            modifier = Modifier.constrainAs(text) {
                linkTo(
                    start = parent.start,
                    top = <http://parent.top|parent.top>,
                    bottom = parent.bottom,
                    end = collapsable.start,
                    horizontalBias = 0F
                )
            })

        Row(modifier = Modifier.constrainAs(collapsable) {
            end.linkTo(parent.end)
            top.linkTo(<http://parent.top|parent.top>)
            bottom.linkTo(parent.bottom)
        }) {
            Divider(
                modifier = Modifier
                    .align(Alignment.CenterVertically)
                    .size(width = 1.dp, height = 24.dp)
            )
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    painter = painterResource(R.drawable.expand),
                    contentDescription = null
                )
            }
        }
    }
}