企业官网建设流程全解析

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_field

extended_text_field 是一款 Flutter 富文本组件库，能快速构建行内图片、@某人、自定义背景等特殊文本。其中的ExtendedSelectableText组件，正是为"只读场景"而生：它让你的富文本既能被用户选中文本、复制真实内容，又能对特殊文本响应点击事件。

一、为什么官方 SelectableText 不够用？

在展示文章详情、聊天消息、卡片内容等只读富文本时，很多开发者会遇到三个痛点：

简单来说：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
• 可运行 Demo：example/lib/pages/simple/selectable_text.dart
• 特殊文本示例（@某人 / 表情 / 金额 / 图片）：example/lib/special_text/

七、新手常见问题

Q1：ExtendedSelectableText 和 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