Michael Bichlmeier

    Michael Bichlmeier

    11 months ago
    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 😉
    @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
                    )
                }
            }
        }
    }