尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

MMAS Money Tracker 多语言国际化实战:12种语言本地化的完整解决方案

MMAS Money Tracker 多语言国际化实战:12种语言本地化的完整解决方案 MMAS Money Tracker 多语言国际化实战12种语言本地化的完整解决方案【免费下载链接】mmas-money-tracker An optimized application for daily expense tracking and personal finance management.项目地址: https://gitcode.com/gh_mirrors/mm/mmas-money-trackerMMAS Money Tracker 是一款专注于日常支出记录与个人财务管理的 Flutter 记账应用内置一套完整的多语言国际化方案支持中文、英文、日文、韩文等 12 种语言的本地化切换让用户无论身处哪个国家都能用自己熟悉的母语记录每一笔收支。本文带你拆解这套方案的架构设计与实现思路并附上新增语言的操作指南。一、为什么记账应用需要国际化 记账工具是典型的高频、本地化敏感应用日期格式、货币符号、消费分类比如房租和水电费在不同文化中的表达都与语言环境紧密相关。一个只支持英文的记账本很难走进日本或德国用户的日常。MMAS Money Tracker 为此做了三件事能力说明 12 种界面语言中、英、德、西、法、印地、日、韩、葡、俄、土耳其、越南语 语言联动货币每种语言默认映射对应货币日元 ¥、欧元 €、卢布 руб 等⚡ 切换即时生效点击即切换界面无需重启 App且偏好被持久化二、整体架构JSON 语言包 LocalizationsDelegate很多新手一接触 Flutter 国际化就会联想到 ARB 文件和代码生成器而 MMAS Money Tracker 选择了一条更轻量的路线纯 JSON 语言包 自定义 LocalizationsDelegate三个核心文件各司其职语言资源加载器app_localization.dart 负责在运行时用rootBundle按语言代码读取对应 JSON 文件解码为MapString, String并提供translate(key)查询方法。语言元数据表language.dart 用一个Language类把 12 种语言的国旗 Emoji、名称、语言代码、货币符号与货币代码打包在一起供语言选择页和货币逻辑共用。工具方法层methods.dart 对外只暴露一个getTranslated(context, key)函数任何页面一行代码即可取到当前语言的文案代码侵入性极低。这种设计的好处是翻译同学只需要维护 JSON 文件完全不用碰 Dart 代码。三、12 个语言包统一 140 个文案键所有语言资源集中在lib/project/localization/lang/目录下以语言代码命名en.jsonzh.jsonja.jsonko.jsonde.jsonfr.jsones.jsonpt.jsonru.jsontr.jsonvi.jsonhi.json每个语言包结构一致、都包含140 个文案键覆盖界面按钮、记账表单、消费分类餐饮、交通、购物、房租、宠物等和提示弹窗。以中文语言包为例键值就是普通的英文短语到中文的映射{ Food Beverages: 餐饮, Mortgage Rent: 租金, This month: 这个月, TOTAL BALANCE: 余额合计 }要记得在 pubspec.yaml 中把该目录声明为 assets 资源Flutter 才会把它们打包进安装包。四、一键切换语言用户是怎么体验的进入「账户管理 → 语言」页面用户会看到带国旗 Emoji 的语言列表 English、 中文、 日本語……点击即生效。对应源码在 select_language.dart点击事件只做三件事调用 shared_preferences_services.dart 中的setLocale把语言代码写入本地偏好通过MyApp.setLocale通知根组件更新界面立即整体重绘无需杀进程用 Provider 标记当前选中项列表上显示一个 ✓ 状态图标。而下一次启动 App 时real_main.dart 会在didChangeDependencies中从本地偏好读回语言代码并恢复——用户的选择永远不会丢失。五、Locale 匹配与回退策略在 real_main.dart 的MaterialApp配置中两个细节决定了多语言的健壮性supportedLocales声明了 12 个Locale(xx, XX)精确匹配项如Locale(zh, CN)并挂载了 Material / Cupertino 官方本地化委托保证系统级组件日期选择器、确认对话框等也能跟着翻译localeResolutionCallback自定义解析回调当设备系统语言不在支持列表内时自动回退到列表首项英文永远不会出现翻译缺失一片空白的情况。此外methods.dart 中的locale()函数维护了语言代码到语言 国家映射如vi → Locale(vi, VN)默认值同样是英文形成双重兜底。六、进阶技巧让语言选择联动货币这是一个容易被忽略的细节——选语言时顺便决定了货币。Language类中每种语言都绑定了货币符号与 ISO 代码 日本語 → ¥ JPY日元 한국어 → ₩ KRW韩元 Русский → руб RUB卢布 English → $ USD美元启动时 getCurrency() 基于当前语言环境调用intl包的NumberFormat.simpleCurrency提取货币符号用于首页金额展示。也就是说一次语言切换界面文字和货币符号同步到位这是很多只翻译界面的项目做不到的细节。七、如何给项目新增第 13 种语言得益于 JSON 语言包架构扩展成本极低只需三步复制语言包在lib/project/localization/lang/下复制一份en.json改名如th.json翻译 140 个键登记元数据在 language.dart 的languageList中添加一行Language(...)填好国旗、语言代码和货币信息声明支持在 real_main.dart 的supportedLocales、app_localization.dart 的isSupported以及 methods.dart 的locale()中各加一项。完成后再执行flutter pub get即可无需改动任何业务页面。八、总结 MMAS Money Tracker 的国际化方案给新手提供了很好的参考模板用JSON 语言包替代繁琐的代码生成翻译与维护解耦用单一getTranslated入口保持业务代码简洁全项目 20 多个页面都复用同一函数用本地偏好持久化 自定义 Locale 解析实现记住用户选择与安全回退用语言—货币联动提升细节体验。这套组合拳不到 200 行核心代码就让一款个人记账应用真正具备了全球化服务能力。如果你想在自己的 Flutter 项目中落地多语言不妨从这里抄作业。【免费下载链接】mmas-money-tracker An optimized application for daily expense tracking and personal finance management.项目地址: https://gitcode.com/gh_mirrors/mm/mmas-money-tracker创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表