Jetpack Compose 如何将具有特定大小的文本组件的文本或内容与左下角或右下角对齐? [英] Jetpack Compose How to Align text or content of Text component with specific size to bottom left or right?

问题描述

如何使用 Jetpack Compose 将文本与 Text 组件的底部对齐?TextAlign 只有 Start、End、Left、Center、Right 和 >对齐选项.

 文本(text = "第一",textAlign = TextAlign.Start，修饰符 = 修饰符.背景(颜色(0xFF1976D2)).size(200.dp),颜色 = 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 组件，而不是 Text 组件的内容，你可以看到 difference

图片中蓝色矩形的代码是

@Composable有趣的 BoxExample() {盒子(修饰符 = 修饰符.fillMaxWidth().height(250.dp).background(颜色.LightGray)){//这是底部的那个文本(text = "第一",修饰符 = 修饰符.背景(颜色(0xFF1976D2)).size(200.dp),颜色 = Color.White，)//这是中间的那个文本(text = "第二",修饰符 = 修饰符.背景(颜色(0xFF2196F3)).size(150.dp),颜色 = 颜色.白色)//这是最上面的文本(text =第三个"，修饰符 = 修饰符.背景(颜色(0xFF64B5F6)).size(100.dp),颜色 = 颜色.白色)}}

对于橙色矩形

@Composable有趣的 BoxShadowAndAlignmentExample() {盒子(修饰符 = 修饰符.fillMaxWidth().height(250.dp).background(颜色.LightGray).填充(8.dp)){盒子(修饰符 = Modifier.shadow(海拔 = 4.dp，形状 = RoundedCornerShape(8.dp))){//这是底部的那个文本(text = "第一",修饰符 = 修饰符.背景(颜色(0xFFFFA000)).size(200.dp),颜色 = 颜色.白色)}盒子(修饰符 = Modifier.shadow(海拔 = 4.dp，形状 = RoundedCornerShape(8.dp)).align(Alignment.TopEnd)){//这是中间的那个文本(text = "第二",修饰符 = 修饰符.背景(颜色(0xFFFFC107)).size(150.dp),颜色 = 颜色.白色)}val 修饰符 = Modifier.shadow(海拔 = 4.dp，形状 = RoundedCornerShape(8.dp)).align(Alignment.BottomStart)盒子(修饰符 = 修饰符){//这是最上面的文本(text =第三个"，修饰符 = 修饰符.背景(颜色(0xFFFFD54F)).size(100.dp),颜色 = 颜色.白色)}}}

解决方案

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

Box(modifier = Modifier.fillMaxSize()) {Text(modifier = Modifier.align(Alignment.BottomEnd),text = 对齐到底端")Text(modifier = Modifier.align(Alignment.BottomStart),text = 对齐到底部开始")Text(modifier = Modifier.align(Alignment.CenterStart),text = 对齐到起始中心")Text(modifier = Modifier.align(Alignment.TopCenter),text = "对齐到顶部中心")}

How can i align text to bottom section of a Text component with Jetpack Compose? TextAlign only has Start, End, Left, Center, Right and Justify options.

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

I want to align Text component's content, each Text has a specific size using modifier.size(x), to align their text to bottom. In the image blue rectangles are Text with different sizes should align the text inside them like in classic Android done with android:gravity.

It is similar to textAlign = TextAlign.x but for bottom.

Setting alignment from a Box aligns Text inside Box or Modifier.align(Alignment.BottomEnd) in BoxScope does what android:layout_gravity does for views, aligns the Text component, not the content of Text component, you can see the difference here.

Code for the blue rectangles in the image is

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

For orange rectangles

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

解决方案

Using align modifier you can align child components in specific positions relative to their parents:

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

这篇关于Jetpack Compose 如何将具有特定大小的文本组件的文本或内容与左下角或右下角对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！