Jetpack 撰写类似 twitter 标题的设计

Question

我们如何在 jetpack compose 中实现这种布局？

我有兴趣将圆形图片“GD”放置在标题图片的顶部，就像这里一样。我尝试使用这样的 Box 布局

Box(
modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
) {
Column(){
    Coil(
        modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp),
        
    )
}

Coil(
    modifier = Modifier
                .height(120.dp)
                .width(120.dp)
                .padding(top = 140.dp, start = 20.dp)
                .clip(CircleShape),
                
    contentScale = COntentScale.Crop
)


}

但这不是正确的形状。

谢谢。

Answer 1

您可以使用Box。
将 Box 中的圆形与align(BottomStart) 修饰符对齐，然后应用offset，最后将Image 夹在CircleShape 中。

类似：

Box(Modifier.padding(top=40.dp)){
    Image(
        painterResource(/* ... */ ),
        "contentDescription",
    )
    Image(
        painter = rememberImagePainter("...."),
        modifier = Modifier
            .height(50.dp)
            .width(50.dp)
            .align(BottomStart)    //align in the Box
            .offset(12.dp, 25.dp)  //apply an offset
            .clip(CircleShape)     //clip the image
            .border(color= White, shape = CircleShape, width=  2.dp),
        contentDescription = "",
        contentScale = ContentScale.Crop
    )

注意：rememberImagePainter 需要 coil-compose 实现。