我正在研究一个使用Android Jetpack Compose的示例，其中我正在显示一些文本方程，如下所示：
<html>
<body>
<!-- Superscript-->
<p> E = mc<sup>2</sup></p>
<!--Subscript-->
<p> CH<sub>4</sub> + H<sub>2</sub>O = CO + 3H<sub>2</sub></p>
</body>
</html>
Text 是否有任何装饰或样式机制可以用来实现相同的输出？
问问题
1571 次
2 回答
18
使用BaselineShift，我们可以使用Span for Text 小部件，它允许将文本装饰为下标或上标。
下面是实现上述输出的工作代码：
@Composable
fun Equations(name: String) {
val defaultStyle = TextStyle(fontSize = 20.sp,
color = Color.White)
val scriptStyleSuper = TextStyle(
baselineShift = BaselineShift.Superscript,
fontSize = 12.sp,
color = Color.Green)
val scriptStyleSub = TextStyle(
baselineShift = BaselineShift.Subscript,
fontSize = 12.sp,
color = Color.Green)
Text {
Span(text = "E = mc", style = defaultStyle) {
Span(
text = "2",
style =scriptStyleSuper
) {
Span(text = "\n")
Span(text = "CH", style = defaultStyle)
Span(text = "4 ",style = scriptStyleSub)
Span(text = "+ H", style = defaultStyle)
Span(text = "2",style = scriptStyleSub)
Span(text = "O = CO + 3H", style = defaultStyle)
Span(text = "2",style = scriptStyleSub)
}
}
}
}
输出：
要查看更多信息：https ://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/package-summary
于 2020-01-05T18:17:53.297 回答
6
您可以使用and1.0.0-beta03定义SpanStyle一个。BaselineShift.SuperscriptBaselineShift.Subscript
就像是：
val superscript = SpanStyle(
baselineShift = BaselineShift.Superscript,
fontSize = 16.sp,
color = Color.Red
)
val subscript = SpanStyle(
baselineShift = BaselineShift.Subscript,
fontSize = 16.sp,
color = Color.Blue
)
然后您可以使用AnnotatedString来显示具有多种样式的文本。
就像是：
Text(
fontSize = 20.sp,
text = buildAnnotatedString {
append("E = mc")
withStyle( superscript) {
append("2")
}
}
)
和
Text(
fontSize = 20.sp,
text = buildAnnotatedString {
append("CH")
withStyle( subscript) {
append("4")
}
append(" + H")
withStyle( subscript) {
append("2")
}
append("O = CO + 3H")
withStyle( subscript) {
append("2")
}
}
)
于 2021-03-25T14:46:35.773 回答