在Android Jetpack Compose UI中,我们如何将文本格式化为上标或下标?

huangapple go评论164阅读模式
英文:

How we can we format Text as superscript or subscript in Android Jetpack Compose UI?

问题

我正在使用Android Jetpack Compose示例中,我正在显示一些文本方程式,如下所示:

  1. <body>
  2. <!-- 上标 -->
  3. <p> E = mc<sup>2</sup></p>
  4. <!-- 下标 -->
  5. <p> CH<sub>4</sub> + H<sub>2</sub>O = CO + 3H<sub>2</sub></p>
  6. </body>
  7. </html>

是否存在任何文本装饰或样式机制,我可以使用它来实现相同的输出?

英文:

I am working on one example using Android Jetpack Compose, where I am displaying some text equations like below :

  1. &lt;html&gt;
  2. &lt;body&gt;
  3. &lt;!-- Superscript--&gt;
  4. &lt;p&gt; E = mc&lt;sup&gt;2&lt;/sup&gt;&lt;/p&gt;
  5. &lt;!--Subscript--&gt;
  6. &lt;p&gt; CH&lt;sub&gt;4&lt;/sub&gt; + H&lt;sub&gt;2&lt;/sub&gt;O = CO + 3H&lt;sub&gt;2&lt;/sub&gt;&lt;/p&gt;
  7. &lt;/body&gt;
  8. &lt;/html&gt;

Does there any decoration or style mechanism exist for Text that I can use to achieve the same output?

答案1

得分: 20

更新: 请参考此处提到的新答案:https://stackoverflow.com/a/66801935/2949612

使用 BaselineShift,我们可以为 Text 小部件使用 Span,这允许装饰文本作为上标或下标。

以下是实现上述输出的工作代码:

  1. @Composable
  2. fun Equations(name: String) {
  3. val defaultStyle = TextStyle(fontSize = 20.sp,
  4. color = Color.White)
  5. val scriptStyleSuper = TextStyle(
  6. baselineShift = BaselineShift.Superscript,
  7. fontSize = 12.sp,
  8. color = Color.Green)
  9. val scriptStyleSub = TextStyle(
  10. baselineShift = BaselineShift.Subscript,
  11. fontSize = 12.sp,
  12. color = Color.Green)
  13. Text {
  14. Span(text = &quot;E = mc&quot;, style = defaultStyle) {
  15. Span(
  16. text = &quot;2&quot;,
  17. style =scriptStyleSuper
  18. ) {
  19. Span(text = &quot;\n&quot;)
  20. Span(text = &quot;CH&quot;, style = defaultStyle)
  21. Span(text = &quot;4 &quot;,style = scriptStyleSub)
  22. Span(text = &quot;+ H&quot;, style = defaultStyle)
  23. Span(text = &quot;2&quot;,style = scriptStyleSub)
  24. Span(text = &quot;O = CO + 3H&quot;, style = defaultStyle)
  25. Span(text = &quot;2&quot;,style = scriptStyleSub)
  26. }
  27. }
  28. }
  29. }

输出:

在Android Jetpack Compose UI中,我们如何将文本格式化为上标或下标?

要查看更多信息,请访问:https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/package-summary

英文:

UPDATE: Please refer new answer mentioned here: https://stackoverflow.com/a/66801935/2949612


Using BaselineShift, we can use Span for Text widget, which allows to decorate text as subscript or superscript.

Below is the working code to achieve the above output:

  1. @Composable
  2. fun Equations(name: String) {
  3. val defaultStyle = TextStyle(fontSize = 20.sp,
  4. color = Color.White)
  5. val scriptStyleSuper = TextStyle(
  6. baselineShift = BaselineShift.Superscript,
  7. fontSize = 12.sp,
  8. color = Color.Green)
  9. val scriptStyleSub = TextStyle(
  10. baselineShift = BaselineShift.Subscript,
  11. fontSize = 12.sp,
  12. color = Color.Green)
  13. Text {
  14. Span(text = &quot;E = mc&quot;, style = defaultStyle) {
  15. Span(
  16. text = &quot;2&quot;,
  17. style =scriptStyleSuper
  18. ) {
  19. Span(text = &quot;\n&quot;)
  20. Span(text = &quot;CH&quot;, style = defaultStyle)
  21. Span(text = &quot;4 &quot;,style = scriptStyleSub)
  22. Span(text = &quot;+ H&quot;, style = defaultStyle)
  23. Span(text = &quot;2&quot;,style = scriptStyleSub)
  24. Span(text = &quot;O = CO + 3H&quot;, style = defaultStyle)
  25. Span(text = &quot;2&quot;,style = scriptStyleSub)
  26. }
  27. }
  28. }
  29. }

Output:

在Android Jetpack Compose UI中,我们如何将文本格式化为上标或下标?

To check more info: https://developer.android.com/reference/kotlin/androidx/compose/ui/text/style/package-summary

答案2

得分: 12

你可以使用BaselineShift.SuperscriptBaselineShift.Subscript来定义一个SpanStyle

类似这样:

  1. val superscript = SpanStyle(
  2. baselineShift = BaselineShift.Superscript,
  3. fontSize = 16.sp,
  4. color = Color.Red
  5. )
  6. val subscript = SpanStyle(
  7. baselineShift = BaselineShift.Subscript,
  8. fontSize = 16.sp,
  9. color = Color.Blue
  10. )

然后,你可以使用AnnotatedString来显示具有多种样式的文本。

类似这样:

  1. Text(
  2. fontSize = 20.sp,
  3. text = buildAnnotatedString {
  4. append("E = mc")
  5. withStyle(superscript) {
  6. append("2")
  7. }
  8. }
  9. )

  1. Text(
  2. fontSize = 20.sp,
  3. text = buildAnnotatedString {
  4. append("CH")
  5. withStyle(subscript) {
  6. append("4")
  7. }
  8. append(" + H")
  9. withStyle(subscript) {
  10. append("2")
  11. }
  12. append("O = CO + 3H")
  13. withStyle(subscript) {
  14. append("2")
  15. }
  16. }
  17. )

在Android Jetpack Compose UI中,我们如何将文本格式化为上标或下标?

  1. Text(
  2. fontSize = 20.sp,
  3. text = buildAnnotatedString {
  4. append("CH")
  5. withStyle(subscript) {
  6. append("4")
  7. }
  8. append(" + H")
  9. withStyle(subscript) {
  10. append("2")
  11. }
  12. append("O = CO + 3H")
  13. withStyle(subscript) {
  14. append("2")
  15. }
  16. }
  17. )

在Android Jetpack Compose UI中,我们如何将文本格式化为上标或下标?

英文:

You can define a SpanStyle using the BaselineShift.Superscript and BaselineShift.Subscript.

Something like:

  1. val superscript = SpanStyle(
  2. baselineShift = BaselineShift.Superscript,
  3. fontSize = 16.sp,
  4. color = Color.Red
  5. )
  6. val subscript = SpanStyle(
  7. baselineShift = BaselineShift.Subscript,
  8. fontSize = 16.sp,
  9. color = Color.Blue
  10. )

Then you can use the AnnotatedString to display the
text with multiple styles.

Something like:

  1. Text(
  2. fontSize = 20.sp,
  3. text = buildAnnotatedString {
  4. append(&quot;E = mc&quot;)
  5. withStyle( superscript) {
  6. append(&quot;2&quot;)
  7. }
  8. }
  9. )

在Android Jetpack Compose UI中,我们如何将文本格式化为上标或下标?

and

  1. Text(
  2. fontSize = 20.sp,
  3. text = buildAnnotatedString {
  4. append(&quot;CH&quot;)
  5. withStyle( subscript) {
  6. append(&quot;4&quot;)
  7. }
  8. append(&quot; + H&quot;)
  9. withStyle( subscript) {
  10. append(&quot;2&quot;)
  11. }
  12. append(&quot;O = CO + 3H&quot;)
  13. withStyle( subscript) {
  14. append(&quot;2&quot;)
  15. }
  16. }
  17. )

在Android Jetpack Compose UI中,我们如何将文本格式化为上标或下标?

答案3

得分: 0

请直接使用Unicode,每个符号都可以找到一个Unicode。

英文:

Please use unicode directly, for every symbol you will be able to find one unicode.

huangapple
  • 本文由 发表于 2020年1月6日 02:17:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/59602862.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定