我们如何在flutter Text或RichText中使用上标和下标文本
Posted
技术标签:
【中文标题】我们如何在flutter Text或RichText中使用上标和下标文本【英文标题】:how can we use superscript and subscript text in flutter Text or RichText 【发布时间】:2019-06-12 18:00:39 【问题描述】:我想显示一个上标文本,但没有找到任何示例,或者任何人都可以帮助我。
我也尝试过 Text 和 RichText,但没有找到任何方法或字段。
【问题讨论】:
如果文本不太长,您可以创建一个由 2 行 和 2 列 组成的新小部件,您可以在其中放置您的左下角插槽内的普通文本和右上角插槽内的上标文本。如果您显示的文本太长,则可能是渲染过多。 【参考方案1】:您需要使用 Unicode。这是从this answer得到的Unicode:
unicode_map =
# superscript subscript
'0' : ('\u2070', '\u2080' ),
'1' : ('\u00B9', '\u2081' ),
'2' : ('\u00B2', '\u2082' ),
'3' : ('\u00B3', '\u2083' ),
'4' : ('\u2074', '\u2084' ),
'5' : ('\u2075', '\u2085' ),
'6' : ('\u2076', '\u2086' ),
'7' : ('\u2077', '\u2087' ),
'8' : ('\u2078', '\u2088' ),
'9' : ('\u2079', '\u2089' ),
'a' : ('\u1d43', '\u2090' ),
'b' : ('\u1d47', '?' ),
'c' : ('\u1d9c', '?' ),
'd' : ('\u1d48', '?' ),
'e' : ('\u1d49', '\u2091' ),
'f' : ('\u1da0', '?' ),
'g' : ('\u1d4d', '?' ),
'h' : ('\u02b0', '\u2095' ),
'i' : ('\u2071', '\u1d62' ),
'j' : ('\u02b2', '\u2c7c' ),
'k' : ('\u1d4f', '\u2096' ),
'l' : ('\u02e1', '\u2097' ),
'm' : ('\u1d50', '\u2098' ),
'n' : ('\u207f', '\u2099' ),
'o' : ('\u1d52', '\u2092' ),
'p' : ('\u1d56', '\u209a' ),
'q' : ('?', '?' ),
'r' : ('\u02b3', '\u1d63' ),
's' : ('\u02e2', '\u209b' ),
't' : ('\u1d57', '\u209c' ),
'u' : ('\u1d58', '\u1d64' ),
'v' : ('\u1d5b', '\u1d65' ),
'w' : ('\u02b7', '?' ),
'x' : ('\u02e3', '\u2093' ),
'y' : ('\u02b8', '?' ),
'z' : ('?', '?' ),
'A' : ('\u1d2c', '?' ),
'B' : ('\u1d2e', '?' ),
'C' : ('?', '?' ),
'D' : ('\u1d30', '?' ),
'E' : ('\u1d31', '?' ),
'F' : ('?', '?' ),
'G' : ('\u1d33', '?' ),
'H' : ('\u1d34', '?' ),
'I' : ('\u1d35', '?' ),
'J' : ('\u1d36', '?' ),
'K' : ('\u1d37', '?' ),
'L' : ('\u1d38', '?' ),
'M' : ('\u1d39', '?' ),
'N' : ('\u1d3a', '?' ),
'O' : ('\u1d3c', '?' ),
'P' : ('\u1d3e', '?' ),
'Q' : ('?', '?' ),
'R' : ('\u1d3f', '?' ),
'S' : ('?', '?' ),
'T' : ('\u1d40', '?' ),
'U' : ('\u1d41', '?' ),
'V' : ('\u2c7d', '?' ),
'W' : ('\u1d42', '?' ),
'X' : ('?', '?' ),
'Y' : ('?', '?' ),
'Z' : ('?', '?' ),
'+' : ('\u207A', '\u208A' ),
'-' : ('\u207B', '\u208B' ),
'=' : ('\u207C', '\u208C' ),
'(' : ('\u207D', '\u208D' ),
')' : ('\u207E', '\u208E' ),
':alpha' : ('\u1d45', '?' ),
':beta' : ('\u1d5d', '\u1d66' ),
':gamma' : ('\u1d5e', '\u1d67' ),
':delta' : ('\u1d5f', '?' ),
':epsilon' : ('\u1d4b', '?' ),
':theta' : ('\u1dbf', '?' ),
':iota' : ('\u1da5', '?' ),
':pho' : ('?', '\u1d68' ),
':phi' : ('\u1db2', '?' ),
':psi' : ('\u1d60', '\u1d69' ),
':chi' : ('\u1d61', '\u1d6a' ),
':coffee' : ('\u2615', '\u2615' )
出于剪切和粘贴目的(来自here):
⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁺ ⁻ ⁼ ⁽ ⁾ ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ₊ ₋ ₌ ₍ ₎
ᵃ ᵇ ᶜ ᵈ ᵉ ᶠ ᵍ ʰ ⁱ ʲ ᵏ ˡ ᵐ ⁿ ᵒ ᵖ ʳ ˢ ᵗ ᵘ ᵛ ʷ ˣ ʸ ᶻ
ᴬ ᴮ ᴰ ᴱ ᴳ ᴴ ᴵ ᴶ ᴷ ᴸ ᴹ ᴺ ᴼ ᴾ ᴿ ᵀ ᵁ ⱽ ᵂ
ₐ ₑ ₕ ᵢ ⱼ ₖ ₗ ₘ ₙ ₒ ₚ ᵣ ₛ ₜ ᵤ ᵥ ₓ ᵅ ᵝ ᵞ ᵟ ᵋ ᶿ ᶥ ᶲ ᵠ ᵡ ᵦ ᵧ ᵨ ᵩ ᵪ
【讨论】:
Flutter 内置了这些字符的常量。见here。例如,“上标 1”为$sup1
,“上标 2”为$sup2
,等等。它还包括希腊字符,以及许多其他内容。
@piccy 汉字,有吗?
@AndreyChaschev 似乎没有。有希腊和各种符号,但我没有看到中文。
@temirbek 一定要导入package:charcode/charcode.dart
。然后你可以像使用任何模板变量一样使用它们,即Text('$sup2')
。
那个包好像没有下标,还是我漏掉了?无论如何,基于上述答案,您可以使用下标将其放入字符串中,例如 $"CO\u2082""【参考方案2】:
您可以在 WidgetSpan 中使用 offset 属性。我使用下面的代码来显示飞行交叉。 Offset dx 和 dy 值可帮助您根据需要设置上标或下标。
RichText(
text: TextSpan(children: [
TextSpan(
text: '9:30 - 2:30',
style: TextStyle(color: Colors.black)),
WidgetSpan(
child: Transform.translate(
offset: const Offset(2, -4),
child: Text(
'+2',
//superscript is usually smaller in size
textScaleFactor: 0.7,
style: TextStyle(color: Colors.red),
),
),
)
]),
)
【讨论】:
【参考方案3】:https://medium.com/flutter-community/font-features-in-flutter-320222fc171d
我找到了这个。但我试过它不适用于我的代码。但可能对你有帮助
Text(
'Superscript',
style: TextStyle(
fontFeatures: [
FontFeature.enable('sups'),
],
),
)
【讨论】:
你也可以使用TextStyle(fontFeatures: [FontFeature.superscripts()])
【参考方案4】:
像这样使用 RichText 小部件
RichText(
text: TextSpan(
style: TextStyle(color: Colors.red, fontSize: 16),
children: [
TextSpan(
text: 'Some text ',
),
WidgetSpan(
child: Transform.translate(
offset: const Offset(0.0, 4.0),
child: Text(
'subscripts',
style: TextStyle(fontSize: 11),
),
),
),
WidgetSpan(
child: Transform.translate(
offset: const Offset(0.0, -7.0),
child: Text(
'supscripts',
style: TextStyle(fontSize: 11),
),
),
),
TextSpan(
text: 'Some text ',
),
],
),
);
【讨论】:
【参考方案5】:尝试了以前的答案,但我遇到了一些字体问题。这对我有用。
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 4.0),
child: Text(
'\$3',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
),
Text(
'99',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 10),
),
],
)
【讨论】:
以上是关于我们如何在flutter Text或RichText中使用上标和下标文本的主要内容,如果未能解决你的问题,请参考以下文章
如何将 Text 变量的初始值提供给 Text Widget Flutter
如何在android studio或vscode中搜索整个Flutter源码
我想在 Flutter 中显示图标或图像而不是 Only Text
- 'TextTheme' 来自 'package:flutter/src/material/text_theme.dart' 或定义一个名为 'subhead' 的 getter 或字段。 .副标题