如何使文本居中垂直在Android组成?

ncecgwcz  于 2023-01-03  发布在  Android
关注(0)|答案(3)|浏览(385)

我正在开发我的第一个完全由Compose设计的应用程序。
我需要使用Text() compose组件垂直集中文本。在传统的Android开发实践中,我通过alignment属性完成了此操作。Text() compose也有alignment属性,但目前它的容量有限(仅允许Alignment.Horizontal()),尽管我注意到Text()中不同的对齐值,当在web中进行研究时。Column()的类似情况-它还具有对齐属性.wrapContentSize(),且还具有对这里可以使用值的限制,尽管在web中的快速研究表明它也可以接收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(
            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))*/
            )
        }
vfwfrxfs

vfwfrxfs1#

只使用Text()是不可能垂直居中的。我问了类似的问题here,你需要使用Box()和contentAlignment = Alignment.Center。还有CenterStart和CenterEnd选项用于对齐。

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

pcrecxhr2#

对齐修饰符依赖于父列表,这是它应该做的,在垂直列表(列)中,垂直对齐由父列表处理(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()中使用此选项不会产生任何效果,因为可组合文件与其内容文本的大小相同
bfnvny8b

bfnvny8b3#

如果“文本”小部件具有高度修饰符(例如-Text(text="example", modifier=Modifier.height(100.dp)),则可以将文本垂直居中。您可以使用wrapContentHeight修饰符来垂直对齐文本(例如Text(text = "Example",modifier = Modifier.width(100.dp).height(100.dp).background(color = Color.Cyan).wrapContentHeight(align = Alignment.CenterVertically),color = Color.Black,fontSize = 42.sp,textAlign = TextAlign.Right)

相关问题