ExtendedSelectableText使用指南：让extended_text_field的只读富文本也能被选中和点击

ExtendedSelectableText使用指南让extended_text_field的只读富文本也能被选中和点击【免费下载链接】extended_text_fieldextended official text field to quickly build special text like inline image, somebody, custom background etc.项目地址: https://gitcode.com/gh_mirrors/ex/extended_text_fieldextended_text_field 是一款 Flutter 富文本组件库能快速构建行内图片、某人、自定义背景等特殊文本。其中的ExtendedSelectableText组件正是为只读场景而生它让你的富文本既能被用户选中文本、复制真实内容又能对特殊文本响应点击事件。一、为什么官方 SelectableText 不够用在展示文章详情、聊天消息、卡片内容等只读富文本时很多开发者会遇到三个痛点需求官方 SelectableTextExtendedSelectableText富文本中混排行内图片选中/点击体验不佳支持选择与命中测试复制出真实内容复制的是占位字符复制 actualText 真实值点击 某人 跳转到个人主页无法做到支持点击回调自定义选中后弹出的工具栏能力有限支持 extendedContextMenuBuilder简单来说EditableText 系列负责可编辑而 ExtendedSelectableText 负责可阅读、可选中、可点击两者分工明确。二、ExtendedSelectableText 能做什么它是 selectable_text.dart 中定义的组件核心能力包括️选择与复制长按选中、拖动选择手柄复制时输出真实文本而非占位符特殊文本点击通过specialTextSpanBuilder构建 某人、$金额$、[表情] 等特殊文本并为它们绑定点击手势自定义工具栏通过extendedContextMenuBuilder为选中后的弹出菜单追加分享点赞等按钮平台自适应iOS/Android/桌面平台自动使用对应的选择手柄和菜单样式。三、快速上手两行代码让只读富文本可被选中第 1 步添加依赖在pubspec.yaml中加入dependencies: extended_text_field: ^16.0.2第 2 步直接使用普通文本传入字符串即可富文本则使用.rich构造方法// 普通字符串 特殊文本构建器 ExtendedSelectableText( [17]欢迎加入 $FlutterCandies$ 社区有问题请联系 zmtzawqlp, specialTextSpanBuilder: MySpecialTextSpanBuilder(), ) // 已构建好的 TextSpan ExtendedSelectableText.rich( TextSpan(text: 可选中、可复制、可点击的只读富文本), )组件默认showCursor为false、只读模式渲染正好契合只读富文本场景无需额外配置。四、给 某人 和 [表情] 添加点击事件specialTextSpanBuilder是关键参数。它按照标记符号扫描文本把xxx、$xxx$、[表情]解析成可交互的特殊文本示例工程中的实现见 my_special_text_span_builder.dart其中每个特殊文本如 at_text.dart都在自己的finishText()里挂载了点击手势。典型玩法点击某人→ 打开个人主页或弹出用户卡片点击$金额$→ 展示价格详情点击[表情]→ 放大预览图片。完整效果可以参考示例页面 selectable_text.dart。五、自定义选中后的弹出工具栏用户选中文字后默认会弹出复制等按钮。想再追加自己的功能可以传入extendedContextMenuBuilder在默认按钮基础上扩展例如 一键分享到外部邮件、微信等 对选中内容执行搜索❤️ 自定义点赞收藏操作。更多交互细节如隐藏系统键盘可以参考库内的TextInputBindingMixin方案。六、获取示例工程与源码定位如果想跑起来看看真实效果可以克隆示例仓库git clone https://gitcode.com/gh_mirrors/ex/extended_text_field关键源码位置速查组件定义lib/src/extended/material/selectable_text.dart内部渲染实现lib/src/extended/rendering/editable.dart、lib/src/extended/widgets/editable_text.dart可运行 Demoexample/lib/pages/simple/selectable_text.dart特殊文本示例某人 / 表情 / 金额 / 图片example/lib/special_text/七、新手常见问题Q1ExtendedSelectableText 和 ExtendedTextField 怎么选需要输入就用 ExtendedTextField只展示、要可点击可复制就用 ExtendedSelectableText。Q2图片能出现在富文本里并被选中吗可以。库支持ImageSpan行内图片配合actualText设置后复制出来的就是真实文字。Q3支持哪些平台Android、iOS、Web、桌面端Windows/macOS/Linux均可并适配 HarmonyOS使用带 ohos 标记的版本。写在最后ExtendedSelectableText 把只读富文本从只能看升级为能选、能复制、能点击。只需两行代码就能让你的文章卡片、消息气泡拥有接近原生体验的交互。动手替换一次你会发现富文本的交互上限完全不一样了 【免费下载链接】extended_text_fieldextended official text field to quickly build special text like inline image, somebody, custom background etc.项目地址: https://gitcode.com/gh_mirrors/ex/extended_text_field创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考