Jetpack Compose: How do you position UI elements within their parent with exact (x,y) coordinates?

Question

According to the documentation on custom layouts: "Each UI element has one parent and potentially many children. Each element is also located within its parent, specified as an (x, y) position, and a size, specified as a width and a height."

Let's say I have a Button inside of a Box. How can I specify the exact X and Y position for the Button inside that Box?

Answer 1

By default Box has TopStart alignment, which is the same as android coordinate space start point. To move from that point you can use offset modifier:

Box {
    Button(
        onClick = { /*TODO*/ },
        modifier = Modifier
            .offset(x = 100.dp, y = 100.dp)
    ) {

    }
}