Jetpack Compose 如何将具有特定大小的文本组件的文本或内容与左下角或右下角对齐？

Question

如何Text使用 Jetpack Compose将文本与组件的底部对齐？textAlign设置只有Start，End，Left，Center，Right和Justify选项。

  Text(
        text = "First",
        textAlign = TextAlign.Start,
        modifier = Modifier
            .background(Color(0xFF1976D2))
            .size(200.dp),
        color = Color.White,
    )

我想对齐Text组件的内容，每个内容Text 都有一个特定的大小，使用modifier.size(x), 将它们的文本对齐到底部。在图像中Text，不同大小的蓝色矩形应该像在经典的 Android 中那样对齐它们内部的文本android:gravity。

它类似于 textAlign = TextAlign.x但用于底部。

从设置排列Box对齐Text内Box或Modifier.align(Alignment.BottomEnd)在BoxScope做什么android:layout_gravity的看法呢，对齐文本组件，而不是内容的Text组成部分，你可以看到difference 在这里。

图像中蓝色矩形的代码是

@Composable
fun BoxExample() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(250.dp)
            .background(Color.LightGray)

    ) {

        // This is the one at the bottom
        Text(
            text = "First",
            modifier = Modifier
                .background(Color(0xFF1976D2))
                .size(200.dp),
            color = Color.White,
        )

        // This is the one in the middle
        Text(
            text = "Second",
            modifier = Modifier
                .background(Color(0xFF2196F3))
                .size(150.dp),
            color = Color.White
        )

        // This is the one on top
        Text(
            text = "Third ",
            modifier = Modifier
                .background(Color(0xFF64B5F6))
                .size(100.dp),
            color = Color.White
        )
    }
}

对于橙色矩形

@Composable
fun BoxShadowAndAlignmentExample() {

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(250.dp)
            .background(Color.LightGray)
            .padding(8.dp)
    ) {

        Box(
            modifier = Modifier.shadow(
                elevation = 4.dp,
                shape = RoundedCornerShape(8.dp)
            )
        ) {
            // This is the one at the bottom
            Text(
                text = "First",
                modifier = Modifier
                    .background(Color(0xFFFFA000))
                    .size(200.dp),
                color = Color.White
            )
        }

        Box(
            modifier = Modifier.shadow(
                elevation = 4.dp,
                shape = RoundedCornerShape(8.dp)
            )
                .align(Alignment.TopEnd)

        ) {
            // This is the one in the middle
            Text(
                text = "Second",
                modifier = Modifier
                    .background(Color(0xFFFFC107))
                    .size(150.dp),
                color = Color.White
            )
        }


        val modifier = Modifier.shadow(
            elevation = 4.dp,
            shape = RoundedCornerShape(8.dp)
        )
            .align(Alignment.BottomStart)

        Box(
            modifier = modifier

        ) {
            // This is the one on top
            Text(
                text = "Third ",
                modifier = Modifier
                    .background(Color(0xFFFFD54F))

                    .size(100.dp),
                color = Color.White
            )
        }
    }
}

Answer 1

2年后，我想我已经找到了这个问题的实际解决方案：对于您的文本可组合项，添加此修饰符： .wrapContentHeight()对于参数，您可以将其与底部对齐Alignment.Bottom

你可以尝试：

Text(
modifier = Modifier
  .height(150.dp)
  .wrapContentHeight(Alignment.Bottom)
,
text = "whooopla",
)

Answer 2

使用align修饰符，您可以将子组件相对于其父组件在特定位置对齐：

Box(modifier = Modifier.fillMaxSize()) {
    Text(modifier = Modifier.align(Alignment.BottomEnd),text = "Aligned to bottom end")
    Text(modifier = Modifier.align(Alignment.BottomStart),text = "Aligned to bottom start")
    Text(modifier = Modifier.align(Alignment.CenterStart),text = "Aligned to start center ")
    Text(modifier = Modifier.align(Alignment.TopCenter),text = "Aligned to top center ")
}