https://kotlinlang.org logo
#compose
Title
# compose
m

Michael Bichlmeier

10/07/2021, 7:25 AM
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 😉
Copy code
@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
                )
            }
        }
    }
}
5 Views