将图像与行中的文本基线对齐

Question

如何将图像与行中文本的基线对齐。

Modifier.alignByBaseline()

适用于文本，但图像不参与对齐。

@Composable
fun Sample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center,
    ) {
        Text(
            text = "One",
            modifier = Modifier.alignByBaseline(),
            fontSize = 40.sp
        )
        Image(
            modifier = Modifier
                .padding(horizontal = 8.dp)
                .size(24.dp)
                .alignBy(FirstBaseline),
            painter = painterResource(id = R.drawable.ic_launcher_background),
            contentDescription = "",
        )
        Text(
            text = "two",
            modifier = Modifier.alignByBaseline(),
            fontSize = 40.sp
        )
    }
}

Answer 1

alignByBaseline

根据项目自身的基线对齐项目，而不是邻居的基线。

您可以将

paddingFromBaseline

用于

Text

，并使用与

padding

相同的值来表示图像

verticalAlignment = Alignment.Bottom

。

要获取基线偏移的实际值并将其传递给填充修改器，您需要等待

TextLayoutResult

：当根据文本大小、字体等计算文本布局时，它会被调用。

Row(
    horizontalArrangement = Arrangement.Center,
    verticalAlignment = Alignment.Bottom,
    modifier = Modifier.fillMaxWidth()
) {
    var maxBaseline by remember { mutableStateOf(0f) }
    fun updateMaxBaseline(textLayoutResult: TextLayoutResult) {
        maxBaseline = max(maxBaseline, textLayoutResult.size.height - textLayoutResult.lastBaseline)
    }
    val topBaselinePadding = with(LocalDensity.current) { maxBaseline.toDp() }
    Text(
        text = "One",
        modifier = Modifier.paddingFromBaseline(bottom = topBaselinePadding),
        fontSize = 20.sp,
        onTextLayout = ::updateMaxBaseline
    )
    Image(
        painter = painterResource(id = R.drawable.ic_launcher_background),
        contentDescription = "",
        modifier = Modifier
            .padding(bottom = topBaselinePadding)
            .size(24.dp)
    )
    Text(
        text = "two",
        modifier = Modifier.paddingFromBaseline(bottom = topBaselinePadding),
        fontSize = 40.sp,
        onTextLayout = ::updateMaxBaseline
    )
}

Answer 2

alignBy

和

alignByBaseline

定义自己的水平线，用于与其他子项对齐。

---

我们需要为图像和文本指定不同的行：

• alignBy { it.measuredHeight }

  对于盒装元素，按盒子底部对齐。

• alignByBaseline

  对于文本，按基线对齐。

另请参阅这个 回答 关于

alignBy

。

---

完整示例：

@Preview
@Composable
fun Sample() {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center,
    ) {
        Text(
            text = "One",
            modifier = Modifier.alignByBaseline(),
            fontSize = 80.sp
        )
        Box(
            modifier = Modifier
                .padding(horizontal = 8.dp)
                .size(24.dp)
                .alignBy { it.measuredHeight }
                .background(color = Color.Blue)
        )
        Text(
            text = "two",
            modifier = Modifier.alignByBaseline(),
            fontSize = 40.sp
        )
        Icon(
            Icons.Default.CheckCircle,
            modifier = Modifier
                .padding(horizontal = 8.dp)
                .size(55.dp)
                .alignBy { it.measuredHeight }
                .background(color = Color.Red),
            contentDescription = "",
            tint = Color.Green,
        )
        Text(
            text = "Three",
            modifier = Modifier.alignByBaseline(),
            fontSize = 60.sp
        )
    }
}