Slang高级功能进阶：RichText富文本、列表、Map与动态Key的10种实用写法

Slang高级功能进阶RichText富文本、列表、Map与动态Key的10种实用写法【免费下载链接】slangType-safe i18n for Dart and Flutter项目地址: https://gitcode.com/gh_mirrors/slang/slangSlang 是 Dart/Flutter 生态中广受好评的类型安全 i18n 国际化解决方案。它用 JSON、YAML、CSV、ARB 文件生成原生 Dart 方法调用在编译期就杜绝错别字和参数遗漏。本文面向已入门的开发者一次讲透 Slang 国际化高级功能中的10 种实用写法RichText 富文本、列表访问、Map 映射与动态 Key帮你把国际化工程能力拉满。一、Slang 国际化项目结构5 分钟快速上手在写高级功能前先确认你的项目结构。克隆示例仓库git clone https://gitcode.com/gh_mirrors/slang/slangSlang 的核心工作方式 翻译文件slang/example/lib/i18n/en.i18n.json、de.i18n.json、fr_FR.i18n.json⚙️ 配置文件slang/example/slang.yaml可省略默认即可用 生成文件slang/example/lib/i18n/strings.g.dart运行dart run slang生成禁止手改生成后通过Translations.of(context)拿到t对象后面 10 种写法全部围绕它展开。二、RichText 富文本翻译一条文案多种样式Slang 的 RichText 基于 Flutter 原生的Text.rich一条翻译可以同时承载颜色、粗细、点击事件核心实现见slang/lib/src/builder/model/node.dart中的RichTextNode。写法 1添加 (rich) 修饰符启用富文本在 key 后加上(rich)修饰符即可{ myText(rich): Welcome $name. Please click ${tapHere(here)}! }方括号内容tapHere(here)表示「参数tapHere默认文案为here」。写法 2TextSpan 参数实现彩色文字运行时把TextSpan作为参数传入用户名就能显示成蓝色Widget a Text.rich(t.myText( name: TextSpan(text: Tom, style: TextStyle(color: Colors.blue)), ));写法 3InlineSpanBuilder 回调打造可点击链接带默认文案的参数接收的是回调函数适合做行内链接、行内按钮Widget a Text.rich(t.myText( tapHere: (text) TextSpan( text: text, style: TextStyle(color: Colors.blue), recognizer: TapGestureRecognizer()..onTap () print(tap), ), )); 提示富文本参数遵循string_interpolation配置可在slang/example/slang.yaml中切换为braces或double_braces语法。三、列表翻译写法数组与嵌套结构直接访问Slang完全支持列表零配置甚至可以列表套列表、列表里放 Map生成代码由slang/lib/src/builder/generator/generate_translations.dart自动处理。{ niceList: [ hello, nice, [first item in nested list, second item in nested list], { wow: WOW!, ok: OK! } ] }写法 4数组索引访问String a t.niceList[1]; // nice写法 5嵌套列表继续用索引String b t.niceList[2][0]; // first item in nested list写法 6列表内嵌 Map属性访问 字符串键访问String c t.niceList[3].ok; // OK! 属性式访问 String d t.niceList[3][wow]; // WOW! 键式访问列表适合「步骤引导」「FAQ 条目」这类顺序固定的多语言内容类型安全且支持任意嵌套。四、Map 映射写法(map) 修饰符动态取值当 key 由数据决定例如服务器返回WARNING就需要 Map 映射。写法 7(map) 修饰符开启字符串键访问在 key 后加(map)整个对象即可用字符串取值{ a(map): { hello world: hello }, b: { b0: hey, b1(map): { hi there: hi } } }String a t.a[hello world]; // hello String b t.b.b0; // hey未加修饰符仍走属性访问 String c t.b.b1[hi there]; // hi示例项目里的真实用例就在slang/example/lib/i18n/en.i18n.jsonlocales(map)把语言代码映射为语言名界面切换语言时直接t.locales[languageCode]即可。写法 8slang.yaml 全局 maps 配置多语言包项目可在配置文件中统一声明对所有 locale 生效# slang.yaml maps: - a - b.b1五、动态 Key 写法flat_map 全量扁平化访问这是 Map 方案更通用的进阶形态所有翻译都能通过一维 Map 按完整路径访问开箱即用、零配置。写法 9完整路径动态取值String a t[mainScreen.title]; // 完整路径 String i t[myPath.anotherPath]; // 路径来自变量也完全可以写法 10动态 Key 带参数与数组索引String b t[myPath.anotherPath.3]; // 数组用数字索引 String c tmyPath.anotherPath; // 支持插值参数⚙️ 若担心误用可在slang.yaml中设置flat_map: false全局关闭。六、Slang 高级功能 10 种写法速查表#场景关键语法一行示例1富文本启用(rich)修饰符myText(rich): ...2富文本着色TextSpan 参数t.myText(name: TextSpan(...))3行内可点击链接InlineSpanBuilder 回调t.myText(tapHere: (text) ...)4列表索引[]t.niceList[1]5嵌套列表[][ ]t.niceList[2][0]6列表内嵌 Map属性/键混用t.niceList[3].ok7Map 动态取值(map)修饰符t.a[hello world]8全局 Map 声明maps:配置maps: [a, b.b1]9全量动态 Keyflat_mapt[mainScreen.title]10动态 Key 参数下标后调用tx.y配合 CLI 工具还能持续体检翻译质量dart run slang analyze可以扫描未使用和缺失的翻译dart run slang normalize按基准语言排序详见 slang/README.md 的 Tools 章节说明。七、团队协作Slang 翻译文件的最佳实践Slang 的嵌套 JSON 结构天然适配主流翻译管理平台。以下截图展示在 Weblate 平台上为 Slang 国际化项目配置翻译文件的实际界面文件格式选JSON nested structure file后Slang 的(rich)、(map)修饰符和嵌套列表都能原样保留译者看到的是清晰的层级结构。再配合平台的 JSON 输出插件缩进、排序翻译文件回流代码库时依旧整洁易读与dart run slang重新生成的代码无缝衔接。小结RichText(rich) TextSpan 参数 回调链接一条文案撑起整个富排版列表零配置支持任意嵌套索引一路穿透Map(map)修饰符或全局maps配置应对数据驱动的 key️动态 Keyflat_map 让任意路径、参数、索引都能动态访问从slang/lib/src/builder/model/node.dart的节点模型到slang/lib/src/builder/generator/generate_translations.dart的代码生成Slang 用编译器替你把关每一个 key 和参数。把上面的速查表收藏好下次做国际化需求时照着抄就行【免费下载链接】slangType-safe i18n for Dart and Flutter项目地址: https://gitcode.com/gh_mirrors/slang/slang创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考