Jetpack Compose如何将文本或Text组件的内容与特定大小对齐到底部左侧或右侧？

Question

如何在使用Jetpack Compose的

  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内部或者在BoxScope中使用Modifier.align(Alignment.BottomEnd)所做的与视图中使用android:layout_gravity相同，会对齐Text组件，而不是Text组件的内容，您可以在此处查看差异。

图像中蓝色矩形的代码为：

@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
            )
        }
    }
}

- Thracian

Answer 1

使用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 ")
}

- Amirhosein

---

记住，如果Text组合元件的父元素是 Box （作为 Column 或 Row 的子元素将不能正常工作），则只有直接从align修饰符访问才能起作用。 - Lucas Sousa

这并没有回答我的问题。它所做的是为视图执行android:layout_gravity操作。我的问题是关于如何为文本组件执行android:layout_gravity操作。我已经将橙色文本组件对齐到一个框内。但是这些文本有一个大小，我希望它们的内容在其中对齐，这可以通过类Views中的android:gravity完成。这里的答案解释了区别。 - Thracian

Answer 2

两年后，我认为我已经找到了解决这个问题的真正方法： 对于您的文本组合，添加以下修改器：.wrapContentHeight()，并且对于参数，您可以例如使用Alignment.Bottom将其与底部对齐。

您可以尝试使用：

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

- Hamid Ebadi

---

这是应该这样做的，因为Modifier.wrapContent会将Constraints的minWidth和minHeight更改为0，从而可以使用实际大小来测量Text的内容，并在wrap之前将其定位在具有尺寸修饰符的容器中。 - Thracian

Answer 3

假设你的组件是一个 Box，在 Box 内部放置文本的方式如下：

Box(
        modifier = Modifier.fillMaxSize(),
        Alignment.BottomStart
    ) {
        Text(
            "First",
            Modifier.padding(16.dp),
        )
    }

基本上，您在组件中定义要使用的部分，而不是在文本中定义。

- Code Poet

---

是的，使用具有特定大小的Box并将文本对齐到底部是可能的，但您还必须为Box和Text设置背景颜色，因为Text会包装其内容，而Box必须具有例如200dp的大小。是否有一种更简单的方法仅使用Text来使文本对齐到任何位置？ - Thracian