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

Question

如何Row按基线对齐 a 内的元素。我的问题是我想要一个Row包含多个Text元素的元素，并且每个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)
                    )
                }
            }
        }
    }
}

这是代码的渲染视图：

score 35 · Accepted Answer

在 Jetpack Compose1.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)
    )
}

score 1 · Accepted Answer

更新：这不再有效。请检查@iknow 的答案。

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

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

score 1 · Accepted Answer

你好这里是最佳答案

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

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

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

score 0 · Accepted Answer

我一点也不为此感到自豪。我只是报道。stackoverflow 上列出的答案（ use Modifier.alignBy(LastBaseline)， wrap Text() inside a Box() and use 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()}
                    }
                )
            }               
        }
    }
}

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

score -1 · Accepted Answer

将以下修饰符添加到 Text composables 并且应该处理它。这是供您参考的代码

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

截屏

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

5 回答 5

Related

Reference