Flutter中如何将RichText传入TextField实现部分可编辑可点击文本？

问题解答 #

1. 是否可以向TextField传入RichText组件？

不可以。标准TextField的输入内容由TextEditingController统一管理，底层渲染依赖内置的带属性文本体系，不支持直接传入独立的RichText组件作为输入内容的一部分。

2. 能否通过标准TextField的相关能力实现部分文本可编辑、可点击的效果？

可以，不需要完全自定义输入组件，通过TextField配套的能力就能实现，核心实现逻辑如下：

• 通过TextEditingValue的属性注解标记特殊文本段：给不可编辑/可点击的文本段标注专属样式，同时记录这些特殊段的起止位置偏移量
• 拦截编辑操作：给TextEditingController添加监听，判断用户的输入、删除等操作是否涉及不可编辑的特殊段，如果涉及就回退操作，保证特殊段内容不会被修改
• 监听点击事件：获取TextField的点击位置，匹配对应到文本的偏移量，如果偏移量落在可点击的特殊段范围内，就触发对应的点击回调即可

如果需要更高的自定义程度，也可以直接使用TextField的底层组件EditableText，直接绑定带GestureRecognizer的TextSpan，可以更便捷地实现文本段的点击交互，同时保留输入编辑能力。

内容的提问来源于stack exchange，提问作者Александр Инженер