如何使用 jetpack compose 实现布局，其中图标在列布局上处于绝对位置

Question

我有评论框，需要将图标放在特定位置（右下角）。我需要制作类似绝对位置的东西，其中我的图标按钮需要位于评论框内的右下角。这是我想要实现的目标。有什么帮助或想法吗？

Answer 1

您可以通过使用Modifier.offset{}并将其放入Icon其中Box来做到这一点Modifier.align(Alignment.BottomEnd)

@Composable
private fun Test() {
    Column(modifier = Modifier.padding(10.dp)) {
        Box(
            modifier = Modifier
                .width(200.dp)
                .background(Color.LightGray.copy(alpha = .5f), RoundedCornerShape(8.dp))
                .padding(4.dp)
        ) {
            Column(
                modifier = Modifier.fillMaxWidth()

            ) {
                Text("Title", fontSize = 20.sp)
                Text("Comment")
            }

            val offsetInPx = with(LocalDensity.current) {
                16.dp.roundToPx()
            }

            Icon(
                imageVector = Icons.Default.Settings,
                contentDescription = null,
                modifier = Modifier
                    .offset {
                        IntOffset(-offsetInPx, offsetInPx)
                    }
                    .shadow(2.dp, RoundedCornerShape(40))
                    .background(Color.White)
                    .padding(horizontal = 10.dp, vertical = 4.dp)
                    .size(30.dp)
                    .align(Alignment.BottomEnd),
                tint = Color.LightGray

            )
        }
        Spacer(modifier = Modifier.height(4.dp))
        Text("Reply", color = Color.Blue)
    }
}