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

Posted 2023-04-18

【中文标题】如何在 Jetpack Compose 中按基线对齐行元素

【英文标题】：How to align row elements by the baseline in Jetpack Compose

【发布时间】：2020-06-09 19:48:21

【问题描述】：

如何将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)
                    )
                
            
        
    

这是代码的渲染视图：

【参考方案1】：

在 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)
    )

【讨论】：

你能帮我解决这个问题吗？ @iknow ***.com/questions/70975294/…

@StuartDTO 我在看这个问题，但目前我不知道如何解决这个问题

【参考方案2】：

更新：这不再有效。请改用@iknow's answer。

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

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

【参考方案3】：

你好，这是最好的答案

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

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

通过在行中使用verticalAlignment和horizo​​ntalArrangement或在Column中使用horizo​​ntalAlignment和verticalArrangement，您可以轻松控制位置，并且您需要查看很多选项作为Row的示例，您可以使用@ 987654322@或verticalAlignment = Alignment.Top或verticalAlignment = Alignment.Center

【参考方案4】：

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

在我找到不那么老套的东西之前，这会让我得到我想要的。

@Composable
fun ForceTextToBottom()
    val density=LocalDensity.current
    var offset by remembermutableStateOf(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()
                    
                )
                           
        
    

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

【参考方案5】：

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

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

截图

【讨论】：

谢谢，我在文档中没有找到类似的东西，你能分享一下这个链接吗

这是我在玩 Compose 并阅读代码时进行的大量实验。深入了解LayoutGravity.RelativeToSiblings 的 cmets 以获取更多信息！不幸的是，这是目前唯一可用的资源。

这不再有效