如何在 Android 撰写中使文本垂直居中？

Question

我正在开发我的第一个完全由 Compose 设计的应用程序。

我需要使用 Text() 撰写组件将文本垂直居中。在传统的 Android 开发实践中，我这样做是为了过度对齐属性。 Text() compose 也有对齐属性，但目前它的容量有限（只允许 Alignment.Horizontal()），尽管我注意到在 Text() 中有不同的对齐值网络研究。 Column() 的类似情况 - 它也有对齐方式属性 .wrapContentSize() 并且对可以在此处使用的值也有限制，尽管在网络上进行快速研究表明它可能会收到 CenterVertically也是。

你是如何实现这种视觉效果的？完整的代码片段如下

@ExperimentalUnitApi
@Composable
fun TripBookingContent(state: PassengerTripUiState.TripBookUiState) {
    Log.d(App.TAG, "[screen] TripBookingContent")
    val baselineGrid = dimensionResource(id = R.dimen.baseline_grid)
    val mainPadding = dimensionResource(id = R.dimen.main_margin_compact)
    var componentSpace = dimensionResource(id = R.dimen.component_space)
    Column(
        modifier = Modifier
            .wrapContentHeight()
            .fillMaxWidth()
            .padding(
                paddingValues = PaddingValues(
                    horizontal = mainPadding,
                    vertical = baselineGrid
                )
            )
    ) {
        TripViewItem(
            data = state.trip,
            {},
            modifier = Modifier.padding(vertical = baselineGrid)
        )
        Text(
            text = stringResource(id = R.string.booking_screen_driver),
            color = colorResource(id = R.color.white),
            style = TextStyle(textIndent = TextIndent(firstLine = TextUnit(16F, TextUnitType.Sp))),
            modifier = Modifier
                .height(componentSpace)
                .padding(start = baselineGrid)
                .fillMaxWidth()
                .background(color = colorResource(id = R.color.design_default_color_secondary_variant))
        )
        Log.d(App.TAG, "[state] state.driver - ${state}")
        Log.d(App.TAG, "[state] state.driver.toDriver() - ${state.driver}")
        DriverCardContent(data = state.driver)

        Text(
            text = stringResource(id = R.string.booking_screen_msg),
            color = colorResource(id = R.color.white),
            style = TextStyle(textIndent = TextIndent(firstLine = TextUnit(16F, TextUnitType.Sp))),
            textAlign = TextAlign.Center,
            modifier = Modifier
//                .height(componentSpace)
                .height(32.dp)
                .padding(start = baselineGrid)
                .fillMaxWidth()
                .background(color = colorResource(id = R.color.colorPrimaryDark))
        )
        /**
         * Disable book button at current (alfa version), for more details
         * */
        Button(
            onClick = { /* no op */ },
            modifier = Modifier
                .alpha(0F)
                .fillMaxWidth()
                .padding(baselineGrid)
                .height(dimensionResource(id = R.dimen.button_height)),
            colors = ButtonDefaults.buttonColors(
                backgroundColor = Color.Blue,
                contentColor = Color.White
            ),
        ) {
            Text(
                text = stringResource(id = R.string.booking_screen_confirm_button),
                modifier = Modifier.align(Alignment.CenterVertically),
                fontWeight = FontWeight.Bold
            )
        }
    }
}

更新我的最终解决方案变成了下面这个。我必须将填充和背景移动到 Box() 层，以实现垂直和水平居中的文本。

        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .height(32.dp)
                .padding(start = baselineGrid)
                .fillMaxWidth()
                .background(color = colorResource(id = R.color.colorPrimaryDark))
        ) {
            Text(
                text = stringResource(id = R.string.booking_screen_msg),
                color = colorResource(id = R.color.white),
                style = TextStyle(textIndent = TextIndent(firstLine = TextUnit(16F, TextUnitType.Sp))),
                textAlign = TextAlign.Center,
/*                modifier = Modifier
//                .height(componentSpace)
                    .height(32.dp)
                    .padding(start = baselineGrid)
                    .fillMaxWidth()
                    .background(color = colorResource(id = R.color.colorPrimaryDark))*/
            )
        }

Answer 1

仅使用 Text() 无法垂直居中。我问了类似的问题 here，你需要使用 Box() with contentAlignment = Alignment.Center。还有用于对齐的 CenterStart 和 CenterEnd 选项。

   Box(
        contentAlignment = Alignment.Center,
    ) {
        Text(
            text = "Text",
            textAlign = TextAlign.Center
        )
    }

Answer 2

对齐修饰符取决于父级，在垂直列表（列）中它应该是这样的，垂直对齐由父级处理（这很好，compose 可以强制执行此操作）

在您的情况下，您可能需要不同的层次结构。例如：Box 而不是 Column。或者，您可以调整 Text 的大小，例如使其高度 200dp 并使用 textAlign，使其文本居中。

供参考：

Box(contentAlignment = Alignment.Center) -> 指定子项的对齐方式
Text(text = "example", modifier = Modifier.wrapContentSize().align()) -> 指定 Text 可组合项在父项
Text(text = "example", textAlign = TextAlign.Center) -> 指定可组合项内部文本的对齐方式，将此与 wrapContentSize() 一起使用不会有任何效果，因为可组合项的大小与其内容文本相同

如何在 Android 撰写中使文本垂直居中？

How to make text centered vertically in Android compose?

android

text

android-jetpack-compose

vertical-alignment