如何在 Jetpack Compose 中按基线对齐行元素

Question

如何根据基线对齐 Row 中的元素。我的问题是我想要一个包含多个 Text 元素的 Row 元素，并且每个 Text 元素都将具有不同的字体和大小。默认情况下，它们在顶部对齐。我需要它们在底部对齐。这是代码：

class MainActivity : ComponentActivity()  {
    override fun onCreate(savedInstanceState: Bundle?)  {
        super.onCreate(savedInstanceState)

        setContent {
            MaterialTheme {
                Row {
                    Text(
                        text = "Abrakadabra",
                        style = TextStyle(fontSize = 22.sp, fontWeight = FontWeight.Bold)
                    )
                    Text(
                        text = "Abrakadabra",
                        style = TextStyle(fontSize = 14.sp, fontWeight = FontWeight.Bold)
                    )
                }
            }
        }
    }
}

这是代码的呈现视图：

Answer 1

将以下修饰符添加到文本可组合项中，这应该会处理好它。这是供您参考的代码

Text(...,  modifier = LayoutGravity.RelativeToSiblings(alignmentLine = FirstBaseline))
Text(...,  modifier = LayoutGravity.RelativeToSiblings(alignmentLine = FirstBaseline))

截图

Answer 2

更新：这不再有效。请改为检查。

目前，使用 Jetpack Compose 1.0.0-alpha03，您可以通过以下方式实现：

Text(modifier = Modifier.alignWithSiblings(FirstBaseline), ...)

Answer 3

在 Jetpack Compose 中 1.0.0 可以这样实现：

Row {
    Text(
        text = "One",
        fontSize = 20.sp,
        modifier = Modifier.alignByBaseline()
    )

    Text(
        text = "Two",
        fontSize = 12.sp,
        modifier = Modifier.alignByBaseline()
    )
}

结果：

如果有人想在使用多行时将文本对齐到最后一个基线 Text 可以使用 Modifier.alignBy(LastBaseline)

来完成

Row {
    Text(
        text = "Line 1\nLine 2",
        fontSize = 20.sp,
        modifier = Modifier.alignBy(LastBaseline)
    )

    Text(
        text = "Line 3",
        fontSize = 12.sp,
        modifier = Modifier.alignBy(LastBaseline)
    )
}

Answer 4

我一点也不为此感到骄傲；我只是在报告。 Whosebug 上列出的答案（使用 Modifier.alignBy(LastBaseline)，将 Text() 包装在 Box() 中并使用 Modifier.align(Alignment.BottomStart)）对我不起作用。可能是因为我正在使用 onTextLayout 回调。

直到我能找到更简单的方法，这会得到我想要的。

@Composable
fun ForceTextToBottom(){
    val density=LocalDensity.current
    var offset by remember{mutableStateOf(0.dp)}
    var aHeightThatIAlreadyKnowInAdvance=100.dp
    Column{
           //some stuff before the stubborn Text()
        Row{//the parent of the stubborn Text()
            Image{//the sibling of the stubborn Text()
            Text(sentence, //This is the stubborn Text()
                ...
                ...
                modifier=Modifier
                    .height(aHeightThatIAlreadyKnowInAdvance)
                    .offset(y=offset)
                ...
                ...
                onTextLayout={textLayoutResult->
                    //Some layout size correction logic
                    offset=with(density){100.dp-textLayoutResult.getLineBottom(textLayoutResult.lineCount-1).toDp()}
                    }
                )
            }               
        }
    }
}

没有什么让我高兴的。但它使文本与底部对齐。

Answer 5

你好这是最佳答案

Row(verticalAlignment = Alignment.Bottom ) {
    Text(
        text = "One",
        fontSize = 20.sp,
     
    )

    Text(
        text = "Two",
        fontSize = 12.sp,
      
    )
}

通过在一行中使用 verticalAlignment 和 horizontalArrangement 或在一列中使用 horizontalAlignment 和 verticalArrangement，您可以轻松控制位置，并且有很多选项需要查看，以 Row 为例，您可以使用 verticalAlignment = Alignment.Bottom 或 verticalAlignment = Alignment.Top 或 verticalAlignment = Alignment.Center

如何在 Jetpack Compose 中按基线对齐行元素

How to align row elements by the baseline in Jetpack Compose

android

android-layout

kotlin

android-jetpack

android-jetpack-compose