如何对齐到 Jetpack Compose 中的一行底部？

Question

我有一个包含几行的列，我想在底部对齐最后一行，但是这一行永远不会位于屏幕底部，它紧跟在前一行之后：

    Column {
        // RED BOX
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(130.dp)                
                .padding(vertical = 15.dp, horizontal = 30.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Column {
                Text(
                    text = stringResource(id = R.string.app_name),
                    style = TextStyle(fontSize = 40.sp),
                    color = Color.White
                )
                Text(
                    text = stringResource(id = R.string.app_description),
                    style = TextStyle(fontSize = 13.sp),
                    fontWeight = FontWeight.Bold,
                    color = Color.Black
                )
            }
        }

        Spacer(
            modifier = Modifier
                .fillMaxWidth()
                .height(15.dp)
        )

        // GREEN BOX
        val currentRoute = currentRoute(navController)
        items.forEach { item ->
            DrawerItem(item = item, selected = currentRoute == item.route) {
                navController.navigate(item.route) {
                    launchSingleTop = true
                }

                scope.launch {
                    scaffoldState.drawerState.close()
                }
            }
        }

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 15.dp, horizontal = 30.dp),
            verticalAlignment = Alignment.Bottom,
            horizontalArrangement = Arrangement.Center
        ) {
            Text(
                text = BuildConfig.VERSION_NAME,
                style = TextStyle(fontSize = 11.sp),
                color = Color.Black,
            )
        }
    }

我想得到和我在图片中显示的一样的东西。我想要第一行（红色），然后是第二行（绿色），然后是适合屏幕底部的第三行（蓝色）

Answer 1

您可以通过多种方式做到这一点。

您可以使用带有 verticalArrangement = Arrangement.SpaceBetween 的列，将 weight(1f,false) 分配给最后一行：

  Column(
     Modifier.fillMaxHeight(),
     verticalArrangement = Arrangement.SpaceBetween) {
     
     //All elements 
     Column {

        // RED BOX
        
        //...
        Spacer(
            modifier = Modifier
                .fillMaxWidth()
                .background(Green)
                .height(15.dp)
        )

       //... Green box
    }

    //LAST ROW
    Row(
        modifier = Modifier
            .weight(1f, false)
    ) {
        //...
    }
 }

Answer 2

您可以在 GreenBox 和 Blue Box 之间使用 Spacer(modifier.weight(1f)) 在它们之间创建空间，或者您可以使用 Layout 函数创建自定义列，并将最后一个 Placeable 的 y 位置设置为 Composable 的高度 - 最后一个 @987654329 的高度@

    Column(modifier = Modifier
        .fillMaxHeight()
        .background(Color.LightGray)) {
        Text(
            "First Text",
            modifier = Modifier
                .background(Color(0xffF44336)),
            color = Color.White
        )
        Text(
            "Second Text",
            modifier = Modifier
                .background(Color(0xff9C27B0)),
            color = Color.White
        )
        Spacer(modifier = Modifier.weight(1f))
        Text(
            "Third Text",
            modifier = Modifier
                .background(Color(0xff2196F3)),
            color = Color.White
        )
    }

结果：

自定义布局

@Composable
private fun CustomColumn(
    modifier: Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        modifier = modifier,
        content = content
    ) { measurables, constraints ->

        val looseConstraints = constraints.copy(
            minWidth = 0,
            maxWidth = constraints.maxWidth,
            minHeight = 0,
            maxHeight = constraints.maxHeight
        )

        // Don't constrain child views further, measure them with given constraints
        // List of measured children
        val placeables = measurables.map { measurable ->
            // Measure each child
            measurable.measure(looseConstraints)
        }

        // Track the y co-ord we have placed children up to
        var yPosition = 0


        // Set the size of the layout as big as it can
        layout(constraints.maxWidth, constraints.maxHeight) {
            // Place children in the parent layout
            placeables.forEachIndexed { index, placeable ->

                println("Placeable width: ${placeable.width}, measuredWidth: ${placeable.measuredWidth}")
                // Position item on the screen
                if (index == placeables.size - 1) {
                    placeable.placeRelative(x = 0, y = constraints.maxHeight - placeable.height)
                } else {
                    placeable.placeRelative(x = 0, y = yPosition)
                }

                // Record the y co-ord placed up to
                yPosition += placeable.height
            }
        }
    }
}

用法

    CustomColumn(
        modifier = Modifier
            .fillMaxHeight()
            .background(Color.LightGray)
    ) {
        Text(
            "First Text",
            modifier = Modifier
                .background(Color(0xffF44336)),
            color = Color.White
        )
        Text(
            "Second Text",
            modifier = Modifier
                .background(Color(0xff9C27B0)),
            color = Color.White
        )
        Spacer(modifier = Modifier.weight(1f))
        Text(
            "Third Text",
            modifier = Modifier
                .background(Color(0xff2196F3)),
            color = Color.White
        )
    }

结果：

在这个带有布局的示例中，您应该考虑如何使用约束以及总宽度和高度来测量可测量值。它需要一些练习，但与现成的相比，您可以获得更独特的设计和更少的工作（更优化）的可组合项。在这里，我将布局设置为 maxWidth，因此无论您分配哪个宽度，它都会占用整个宽度。这是为了演示，您可以根据需要在layout 中设置最大宽度或高度。