当前位置: 首页 > news >正文

Flutter 国际化(i18n)全指南:一键切换中/英/日多语言

一、为什么需要国际化?

如果你的应用面向全球用户,多语言支持是基本要求。Flutter 官方提供了强大的flutter_localizations包,配合intl工具,可轻松实现多语言切换。


二、快速上手:三步实现中英文切换

步骤 1:添加依赖

yaml

编辑

# pubspec.yaml dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter intl: ^0.19.0

步骤 2:配置 MaterialApp

dart

编辑

import 'package:flutter_localizations/flutter_localizations.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( localizationsDelegates: const [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalCupertinoLocalizations.delegate, ], supportedLocales: const [ Locale('en', ''), // 英语 Locale('zh', ''), // 中文 Locale('ja', ''), // 日语 ], home: HomePage(), ); } }

步骤 3:使用AppLocalizations

dart

编辑

// 获取当前语言文本 Text(AppLocalizations.of(context)!.helloWorld)

⚠️ 但此时会报错:缺少AppLocalizations类!


三、生成多语言资源文件(关键步骤)

1. 创建l10n.yaml文件(项目根目录)

yaml

编辑

arb-dir: lib/l10n template-arb-file: app_en.arb output-localization-file: app_localizations.dart

2. 创建语言文件

  • lib/l10n/app_en.arb

    json

    编辑

    { "helloWorld": "Hello World", "welcomeMessage": "Welcome, {name}!" }
  • lib/l10n/app_zh.arb

    json

    编辑

    { "helloWorld": "你好,世界", "welcomeMessage": "欢迎,{name}!" }
  • lib/l10n/app_ja.arb

    json

    编辑

    { "helloWorld": "こんにちは、世界", "welcomeMessage": "ようこそ、{name}さん!" }

3. 生成代码

bash

编辑

flutter gen-l10n

✅ 自动生成app_localizations.dart,无需手动编写!


四、动态切换语言(带保存)

dart

编辑

// 切换语言并重启应用 void changeLanguage(BuildContext context, String locale) { final MyAppState? state = context.findAncestorStateOfType<MyAppState>(); if (state != null) { state.setLocale(Locale(locale)); } } // 在 MyApp 中管理状态 class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => MyAppState(); } class MyAppState extends State<MyApp> { late Locale _locale; @override void initState() { super.initState(); _locale = const Locale('zh'); // 默认中文 } void setLocale(Locale locale) { setState(() { _locale = locale; }); } @override Widget build(BuildContext context) { return MaterialApp( locale: _locale, // ...其他配置同上 ); } }

💡 可结合shared_preferences保存用户选择。


五、实际效果展示

语言截图
中文
English
日本語

📌 支持参数化文本:AppLocalizations.of(context)!.welcomeMessage('张三')


六、高级技巧

  1. 复数形式(如 “1 item” vs “2 items”):

    arb

    编辑

    "itemCount": "{count, plural, =0{无项目} =1{1个项目} other{{count}个项目}}"
  2. 日期/数字本地化

    dart

    编辑

    DateFormat.yMMMd().format(DateTime.now()); // 自动适配语言格式
  3. RTL 语言支持(如阿拉伯语):

    dart

    编辑

    MaterialApp( supportedLocales: [Locale('ar')], localizationsDelegates: [...], theme: ThemeData(useMaterial3: true), )

    Flutter 会自动镜像布局!


七、结语

国际化不再是“附加功能”,而是产品出海的必备能力。Flutter 的gen-l10n工具链让多语言开发变得简单高效。

完整示例代码:github.com/yourname/flutter-i18n-demo

如果你正在做全球化 App,不妨现在就集成 i18n!


http://www.cnnetsun.cn/news/91981.html

相关文章:

  • 图解 - 红黑树(插入)
  • Memgraph 全新 AI 图工具包:一键构建 GraphRAG 聊天机器人,实现快速上下文感知响应
  • 初始化列表和特殊成员
  • (二)前端基础框架构建
  • vLLM推理引擎教程6-Nsight Systems性能分析
  • 基于MATLAB的燃料电池汽车参数匹配与能量管理策略优化及仿真模型研究资料库
  • AM247L-0000伺服电机
  • DoraemonKit(DoKit)使用教程:从集成到实战
  • 构筑 AI 理论体系:深度学习 100 篇论文解读 第十九篇:序列建模的焦点——注意力机制 Attention Mechanism (2015)
  • 【小白笔记】移除元素与删除有序数组中的重复项与轮转数组(三步反转)
  • 什么是关键字驱动测试?
  • 前沿技术借鉴研讨-2025.12.16(超声心动图综述/妊娠期糖尿病/降低CTG解读主观性)
  • 别让发成绩,耗掉你课后的半小时
  • 企业级 Prompt 管理中心:实验分流 + 曝光埋点 + 可回溯,版本化/AB/DSL/可观测全齐
  • 执行 install.sh 报错 `env: ‘bash\r‘: No such file or directory` 怎么解决?
  • Part 10|我给这套系统划的第一个边界
  • agent-zh.md
  • 为什么过滤 rtmpt 而不是 rtmp?
  • Navicat x 达梦技术指引 | 启用和配置AI助手
  • Transformer的注意力权重的理解
  • 解构 Codigger:从内核到无限生态的“进化阶梯”
  • 基于Python的高考志愿报名推荐系统源码设计与文档
  • 飞桨PaddlePaddle入门与核心实践
  • 使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第四十讲)
  • 热销榜单:2025年高口碑数字人推荐,解决你的选择难题!
  • 应“双碳”考核!安科瑞通信机房能耗监测方案,让PUE管控精准落地
  • 1天净流入10亿!A500ETF南方凭什么成为布局中国核心资产的优选?
  • Android 基础入门教程之RelativeLayout(相对布局)
  • 基于微信小程序的跑腿系统的设计与实现毕业设计项目源码
  • 基于SpringBoot的社区老年人健康知识阅读分享管理系统毕业设计项目源码