我正在开发我的第一个完全由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))*/
)
}
3条答案
按热度按时间vfwfrxfs1#
只使用
Text()
是不可能垂直居中的。我问了类似的问题here,你需要使用Box()和contentAlignment = Alignment.Center。还有CenterStart和CenterEnd选项用于对齐。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()
中使用此选项不会产生任何效果,因为可组合文件与其内容文本的大小相同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)