Jetpack compose 设计如 Twitter header

Question

如何在 Jetpack Compose 中实现这种布局？

我有兴趣将圆形图片 'GD' 放置在 header 图像的顶部，就像这里一样。我试过像这样使用 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 实施。