使用extended_text_field组件进行修改,
其中涉及一些组件RegExpSpecialText、RegExpSpecialTextSpanBuilder、SpecialTextSpan、ImageSpan、ExtendedWidgetSpan、ExtendedText.rich
SpecialTextSpan:
很关键的一个组件,能替换原有字符串的东西,显示想要显示的信息
SpecialTextSpan 核心功能
特殊文本标记:可以标识文本中的特定部分(如链接、话题标签等)
自定义手势识别:为特殊文本添加点击处理
光标控制:正确处理特殊文本区域的光标位置
文本替换:可以显示与实际文本不同的内容
image.png
SpecialTextSpan(
text: "点击链接", // 显示文本
actualText: "https://example.com", // 实际文本
start: 10, // 在原始文本中的起始位置
style: TextStyle(
color: Colors.blue,
decoration: TextDecoration.underline,
),
recognizer: TapGestureRecognizer()
..onTap = () {
print("链接被点击: https://example.com");
// 可以调用 url_launcher 打开链接
},
deleteAll: true, // 替换整个匹配文本
);
ExtendedTextField(
controller: _controller,
specialTextSpanBuilder: MySpecialTextBuilder(),
// 其他参数...
)
class MySpecialTextBuilder extends SpecialTextSpanBuilder {
@override
TextSpan build(
String data, {
TextStyle? textStyle,
SpecialTextSpanTapCallback? onTap,
}) {
// 实现特殊文本识别逻辑
final spans = <InlineSpan>[];
// 添加特殊文本
spans.add(SpecialTextSpan(
text: "[链接]",
actualText: "https://example.com",
start: 5,
style: textStyle?.copyWith(color: Colors.blue),
recognizer: TapGestureRecognizer()..onTap = () => onTap?.call("https://example.com"),
));
return TextSpan(children: spans);
}
}
其中遇到复杂问题和灵活使用看情况处理,光标问题大部分都是start 和actualText的问题