Jetpack 組成設計，如 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實現。