在 Flutter 中创建日文假名 EditableText

Question

我想创建一个罗马字到假名的转换器 EditableText。也就是说，在 EditableText 中写“saikou”，显示的文本例如应该是“さいこう”。

目前，如果用户继续写作而不想编辑他的 文本（但由于偏移错误，光标位于文本的开头而不是末尾）。

但是一旦用户手动移动 TextSelection（通过在 EditableText 上的某处点击），光标最终定位良好，但是当他尝试编辑文本（添加或删除字符）时，错误的偏移量会导致混乱.

例子：

用户想去掉“こ”。他将光标移到这里（用竖线表示）：“さいこ|う”。但是当他按下删除键时，“い”字符反而会消失。这是因为原文（saikou）和日文翻译（“さいこう”）的长度不同。原文的长度是6，而日文的长度只有4。通过这样放置我们的光标并点击“删除键”，我们将尝试删除原文中字母“i”而不是第3个字符“こ”在日文翻译中。

想法

我可以编写一个函数，将原始偏移量与相应的日本偏移量相匹配。但这只有在我可以防止发生默认文本删除并因此以编程方式更新文本时才有用。但是，我找不到阻止删除的方法。 我已经尝试在 EditableText 上使用 onChange 方法，但尽管尝试在函数中返回，修改仍然发生。我还查看了 EditableText 的控制器并尝试在触发侦听器时更改文本，但由于此侦听器中的状态更改而导致无限循环。

任何帮助将不胜感激！

Answer 1

在没有看到任何代码的情况下发表评论有点棘手，但让我们看看..

所以，我用 Javascript 设置了这个解决方案，然后将它移植到了 Flutter。希望这会有所帮助。无论键入时光标是否位于末尾，这对我都有效。

final newText = convertFromRomaji(oldText);
final origPosition = tController.selection.start;
final origLength = oldText.length;
final newLength = newText.length;
final newPosition = newLength - (origLength - origPosition);

tController.value = tController.value.copyWith(
text: newText, 
selection : TextSelection(baseOffset : newPosition, extentOffset: newPosition)
);

前四行只是赋值，第 1 行使用你拥有的任何东西从罗马字转换为平假名。 tController 附加到 TextField。这是文本字段：

TextField(
    controller: tController,
    onChanged: (text) => setText(text) /* calls the above code */
); 

这不会在任何地方保留原始罗马字，就像日文 IME 不会一样。一旦进行了转换，旧的罗马字就会被丢弃，只剩下日本人。

我没有你描述的问题，所以这是？解决您的问题。