Flutter 中的富文本组件

Question

我想用 Flutter 制作一个混合应用程序。我正在查看的一种特定类型的组件听起来像这样：

显示了一个像家（意思是家）这样的汉字
当用户点击该字符时，它可以显示其发音（jia）
用户也可以选择点击播放发音
用户还可以选择打开 window 播放角色书写动画的地方。
所以对于像这样的一句话：蓝天是白云的家（直译为：蓝天是白云的家），这7个字符中的每一个都可以单独点击，用户可以选择显示/播放发音/显示它们是如何写的。

普通的静态文本不够丰富，无法显示所有这些信息。我目前的想法是让每个角色都成为一个自定义的小部件，其中嵌入了这些数据。

如果每个汉字（大约有 5000 个常用字符）都有自己丰富的数据格式，这个任务会非常庞大。

关于如何在 Flutter 中有效地解决这个问题有什么建议吗？

提前致谢！

Answer 1

有几种方法可以做到这一点。使用小部件绝对是一种选择，但这可能会给您带来长期的问题运行.

让我们把它分成两部分：

1：显示文字

如果你这样做，我建议你使用 RichText with many TextSpan children. You could create a custom class that accepts the string, splits it into characters, and puts each character in its own TextSpan. By using TextSpan.recognizer. You could then either use a TapGestureRecognizer with onTap to show the information when tapped if you don't need the position at which it was tapped, or onTapDown/onTapUp 而不是使用小部件（例如，如果你想在点击发生的地方显示一个弹出窗口，而不是底部 sheet 出现了）。

2：显示信息

因为你想要处理大量的字符，我建议不要在代码中全部完成，而是以其他一些易于操作的格式处理字符，例如 JSON。这样你就可以做一些事情，比如将数据分成块并根据需要加载它们，and/or 从网络服务器获取它们。

您的数据可能类似于：

{
  "家": {
    "pronunciation": "jia",
    "audio": "path/to/sound.m4a",
    "animation": "path/to/animation.gif"
  },
  ...
}

从理论上讲，您甚至可以做一些事情，例如在字符首次显示或单击时开始加载发音文件。

点击角色时，您可以：

检查缓存中是否有数据
如果需要，从 network/disk
打开底部 sheet 或弹出显示发音信息 + 音频和绘图动画按钮

Flutter 中的富文本组件

Rich text components in Flutter

flutter

flutter-animation

1：显示文字

2：显示信息