Jetpack Compose:如何在Row中仅居中单个元素
解决方案
你可以使用ConstraintLayout精准控制两个Text的位置,让"22"水平居中于父容器,度数符号紧跟在它右侧:
ConstraintLayout(modifier = Modifier.fillMaxWidth()) { val (numberText, degreeText) = createRefs() Text( text = "22", fontStyle = FontStyle.Italic, fontSize = 150.sp, modifier = Modifier.constrainAs(numberText) { centerHorizontallyTo(parent) } ) Text( text = Typography.degree.toString(), fontSize = 150.sp, modifier = Modifier.constrainAs(degreeText) { start.linkTo(numberText.end) baseline.linkTo(numberText.baseline) // 保证和数字基线对齐,避免错位 } ) }
如果不想引入ConstraintLayout,也可以用Box结合偏移实现(注意偏移量需根据字体大小调整):
Box(modifier = Modifier.fillMaxWidth()) { Text( text = "22", fontStyle = FontStyle.Italic, fontSize = 150.sp, modifier = Modifier.align(Alignment.Center) ) Text( text = Typography.degree.toString(), fontSize = 150.sp, modifier = Modifier.align(Alignment.Center) .offset(x = 75.sp) // 偏移量对应数字字体宽度的一半左右 ) }
之前的方法无效的核心原因:你给整个Row设置Arrangement.Center会让两个Text作为整体居中,而非单独让"22"处于父容器水平中心;用weight修饰符会让数字Text占满剩余空间,导致度数符号被挤到最右侧,都不符合需求。
内容的提问来源于stack exchange,提问作者Toky10
相关产品推荐
相关产品推荐

