Home

深色模式

Flutter 国际化之 intl ​

intl是Flutter官方推荐的国际化解决方案，它提供了一套完整的国际化工具，可以帮助开发者轻松实现应用的多语言支持。

安装配置 ​

添加依赖 ​

在pubspec.yaml文件中添加以下依赖：

yaml
dependencies:
  flutter_localizations:
    sdk: flutter
  intl: ^0.19.0

flutter:
  generate: true  # 自动生成代码

flutter_intl:
  enabled: true
  class_name: S  # 生成的本地化类名
  main_locale: zh  # 主要语言
  arb_dir: lib/l10n/arb  # ARB文件存放目录
  output_dir: lib/l10n/generated  # 生成的代码存放目录

安装IDE插件（可选但推荐） ​

  • VS Code: 安装 "Flutter Intl" 插件
  • Android Studio/IntelliJ IDEA: 安装 "Flutter Intl" 插件

ARB文件 ​

ARB (Application Resource Bundle) 是一种基于JSON的文件格式，用于定义应用程序的本地化资源。

创建ARB文件 ​

在lib/l10n/arb目录中创建以下文件：

json
{
  "@@locale": "zh",
  "appTitle": "我的应用",
  "hello": "你好",
  "welcome": "欢迎使用 {appName}",
  "@welcome": {
    "description": "欢迎信息",
    "placeholders": {
      "appName": {
        "type": "String",
        "example": "Flutter应用"
      }
    }
  },
  "itemCount": "{count, plural, =0{没有项目} =1{1个项目} other{{count}个项目}}",
  "@itemCount": {
    "description": "项目数量",
    "placeholders": {
      "count": {
        "type": "int",
        "example": "1"
      }
    }
  }
}
json
{
  "@@locale": "en",
  "appTitle": "My App",
  "hello": "Hello",
  "welcome": "Welcome to {appName}",
  "@welcome": {
    "description": "Welcome message",
    "placeholders": {
      "appName": {
        "type": "String",
        "example": "Flutter App"
      }
    }
  },
  "itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}",
  "@itemCount": {
    "description": "Item count",
    "placeholders": {
      "count": {
        "type": "int",
        "example": "1"
      }
    }
  }
}

ARB语法详解 ​

ARB文件使用JSON格式，包含以下几种主要元素：

  1. 简单字符串：直接键值对

    json
    "hello": "你好"

  2. 带参数的字符串：使用花括号定义参数

    json
    "welcome": "欢迎使用 {appName}"

    同时需要定义参数的元数据：

    json
    "@welcome": {
  "description": "欢迎信息",
  "placeholders": {
    "appName": {
      "type": "String",
      "example": "Flutter应用"
    }
  }
}

  3. 复数形式：处理数量相关的文本

    json
    "itemCount": "{count, plural, =0{没有项目} =1{1个项目} other{{count}个项目}}"

  4. 选择形式：基于枚举值选择不同文本

    json
    "gender": "{gender, select, male{他} female{她} other{他们}}"

更多ARB语法详情可参考：ARB语法文档

生成代码 ​

修改arb文件，保存以后，会自动生成代码。

在项目中使用 ​

配置应用 ​

在MaterialApp或CupertinoApp中配置国际化支持：

dart
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:your_app/l10n/generated/l10n.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Intl Demo',
      // 配置本地化代理
      localizationsDelegates: const [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      // 支持的语言列表
      supportedLocales: S.delegate.supportedLocales,
      // 当前语言
      locale: const Locale('zh'),
      // 语言解析回调
      localeResolutionCallback: (locale, supportedLocales) {
        if (locale != null && S.delegate.isSupported(locale)) {
          return locale;
        }
        return const Locale('zh'); // 默认使用中文
      },
      home: MyHomePage(),
    );
  }
}

使用本地化字符串 ​

dart
import 'package:flutter/material.dart';
import 'package:your_app/l10n/generated/l10n.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).appTitle),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(S.of(context).hello),
            Text(S.of(context).welcome('Flutter Demo')),
            Text(S.of(context).itemCount(5)),
          ],
        ),
      ),
    );
  }
}

动态切换语言 ​

要实现动态切换语言，可以使用状态管理方案（如Provider、Riverpod等）：

dart
// 使用Provider
class LocaleProvider extends ChangeNotifier {
  Locale _locale = const Locale('zh');
  
  Locale get locale => _locale;
  
  void setLocale(Locale locale) {
    _locale = locale;
    notifyListeners();
  }
}

// 在应用中使用
return MaterialApp(
  localizationsDelegates: const [
    S.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: S.delegate.supportedLocales,
  locale: Provider.of<LocaleProvider>(context).locale,
  // ...
);

// 切换语言
ElevatedButton(
  onPressed: () {
    final provider = Provider.of<LocaleProvider>(context, listen: false);
    provider.setLocale(const Locale('en'));
  },
  child: Text('Switch to English'),
)

参考资源 ​