Jetpack Compose中如何组合Button与Star图标实现角部重叠UI元素

核心问题根因 #

Compose 中的 Box 布局默认会把所有未单独指定对齐规则的子元素，统一对齐到 Box 自身的左上角，这就是你当前 Star 图标固定停留在左上角的原因。
之前用 Row 布局无法实现重叠效果，本质是 Row 属于线性排布容器，子元素会沿主轴依次排列，天然不支持层叠覆盖，你切换到 Box 做层叠容器的方向是完全正确的，只需要补全对齐规则就能达到预期效果。

具体调整步骤 #

1. 移除Button上多余的end方向padding
   你之前在 Button 的 modifier 上加的 padding(end = 48) 是传统线性布局下给相邻元素腾空间的写法，在层叠布局中完全没必要——星标本来就是要跨在按钮边缘叠放的，提前加 padding 会缩小按钮的实际尺寸，破坏按钮本身的视觉比例。
2. 给Star图标单独指定目标位置
   Box 布局支持给单个子元素通过 Modifier.align() 方法单独指定在容器内的对齐位置，优先级高于 Box 全局的对齐规则，你可以根据需要的角部位置选择对应的对齐参数：
   • 需要放在右上角（常见的角标装饰位置）：使用 Modifier.align(Alignment.TopEnd)
   • 需要放在左上角：使用 Modifier.align(Alignment.TopStart)
3. 微调位置实现重叠探出效果
   由于 Box 的尺寸会跟随最大的子元素（也就是 Button）自动匹配，此时对齐到对应角部的 Star 图标刚好和按钮的角完全贴合，如果需要实现「一半压在按钮上、一半探出按钮边缘」的装饰效果，可以给 Star 图标加少量 offset 偏移：
   往外侧方向移动图标即可，比如放在右上角位置时，可以设置 .offset(x = 8.dp, y = (-8).dp)，让图标探出按钮边界，做出带层次感的重叠装饰效果。

调整后的参考代码 #

Box(modifier = Modifier.wrapContentSize()) {
    Button(
        onClick = {
            // 原有点击逻辑
        }
    ) {
        // 按钮原有内容
    }

    IconWithStar(
        modifier = Modifier
            // 单独指定图标对齐到Box的右上角
            .align(Alignment.TopEnd)
            // 保留原有的缩放比例
            .scale(0.65f)
            // 偏移实现探出按钮的重叠效果
            .offset(x = 8.dp, y = (-8).dp)
    )
}

注意：Box 的子元素绘制顺序和代码中的书写顺序一致，后写的元素会绘制在先写的元素上层，这里把 Star 图标写在 Button 后面，就能保证星标是叠在按钮上层的，不会被按钮遮挡。

内容的提问来源于stack exchange，提问作者Ralf Wickum