android - 如何从两个 Widget 组成一个新的 UI 元素？

Question

Image 我在 Android 中有一个普通的按钮和一个星形图标。我想将它们组合成一个新的 Button 图标，其中的星星位于上角之一，如下所示:

当我使用 Row 时，两者是分开的。如您所见，星星应与按钮的一个角重叠。我该怎么做？

编辑:感谢我使用的 Gabriele Mariotti

Box {

    Button(
        id = "btnButton",
        modifier = Modifier
            .padding(end = 48)
        onClick = {
            //..
        }
    )

    IconWithStar(
        modifier = Modifier
            .scale(0.65f)
    )
}

星形图标绑定(bind)在左上角，我该如何修改？

Answer 1

您可以使用 Box 包裹可组合项，并使用 align/offset 修饰符来调整它们的位置。

Box(Modifier.padding(top=40.dp)){
    Button(
        onClick = {}) 
    {
        Text("Hello World")
    }
    Icon(
        Icons.Filled.Star, "",
        modifier =Modifier
            .align(TopEnd)
            .offset(12.dp,-12.dp),
        tint = Yellow600
    )
}

要获得更多控制权，您可以构建自定义布局。
像这样的东西:

Layout( content = {

        Button(
            modifier = Modifier.layoutId("button"),
            onClick = { /* ... */ })
        {
            Text("Hello World")
        }
        Icon(Icons.Filled.Star, "",
            Modifier.layoutId("icon"),
            tint = Yellow600)
}){ measurables, incomingConstraints ->

    val constraints = incomingConstraints.copy(minWidth = 0, minHeight = 0)
    val buttonPlaceable =
        measurables.find { it.layoutId == "button" }?.measure(constraints)
    val iconPlaceable =
        measurables.find { it.layoutId == "icon" }?.measure(constraints)

    //align the icon on the top/end edge
    layout(width = widthOrZero(buttonPlaceable) + widthOrZero(iconPlaceable)/2,
        height = heightOrZero(buttonPlaceable)+ heightOrZero(iconPlaceable)/2){

        buttonPlaceable?.placeRelative(0, heightOrZero(iconPlaceable)/2)
        iconPlaceable?.placeRelative(widthOrZero(buttonPlaceable)- widthOrZero(iconPlaceable)/2,
           0)

    }
}


internal fun widthOrZero(placeable: Placeable?) = placeable?.width ?: 0
internal fun heightOrZero(placeable: Placeable?) = placeable?.height ?: 0