如何在 jetpack compose 中将组件堆叠在一起？

Question

我想创建一个仪表板，并且希望在顶部有这种布局。如何在 jetpack compose 中实现这样的布局？ 顶部仪表板布局, 顶部仪表板布局 2

Answer 1

您可以使用 Box 或 BoxWithConstraints 来实现该外观。这里的关键是将中心与底部对齐，并添加底部填充，其大小与底部可组合项的高度和底部可组合项的一半高度之和一样大，因为底部和顶部的可组合项不会具有相同的高度。

@Composable
private fun MyComposable(modifier: Modifier = Modifier) {
    BoxWithConstraints(modifier = modifier.fillMaxWidth(1f)) {
        val maxHeight = this.maxHeight

        val topHeight: Dp = maxHeight * 2 / 3
        val bottomHeight: Dp = maxHeight / 3

        val centerHeight = 100.dp

        val centerPaddingBottom = bottomHeight - centerHeight / 2

        Top(
            modifier = Modifier
                .fillMaxWidth()
                .align(Alignment.TopCenter)
                .height(topHeight)
        )

        Bottom(
            modifier = Modifier
                .fillMaxWidth()
                .align(Alignment.BottomCenter)
                .height(bottomHeight)
        )

        Center(
            modifier = Modifier
                .padding(start = 10.dp, end = 10.dp, bottom = centerPaddingBottom)
                .fillMaxWidth()
                .height(centerHeight)
                .align(Alignment.BottomCenter)
        )
    }
}

@Composable
private fun Top(modifier: Modifier) {
    Column(modifier.background(Blue400)) {

    }
}

@Composable
private fun Bottom(modifier: Modifier) {
    Column(modifier.background(Color.White)) {

    }
}

@Composable
fun Center(modifier: Modifier) {
    Column(modifier.background(Color.Red, shape = RoundedCornerShape(10.dp))) {

    }
}

结果