Flutter 实现Localizations

封面图 • 2025-10-01 • Flutter

在 Flutter 中实现 `Localizations`（国际化）通常涉及以下几个步骤：

---

## ✅ 1. 创建本地化支持的类

首先，你需要创建一个类来管理不同语言的字符串资源。通常使用 `flutter_localizations` 包中的 `Localizations` 类。

### 示例：创建一个 `AppLocalizations` 类

```dart
// lib/localization/app_localizations.dart

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class AppLocalizations {
  AppLocalizations(this.locale);

final Locale locale;

static const List<Locale> supportedLocales = [
    Locale('en', 'US'),
    Locale('zh', 'CN'),
  ];

static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations)!;
  }

String get welcomeMessage => AppLocalizations.delegate
      .load(locale)
      .then((localizations) => localizations.welcomeMessage);
}
```

> 注意：你也可以使用 `flutter_gen` 或 `intl` 来生成本地化类，但这里我们手动演示。

---

## ✅ 2. 配置 `MaterialApp` 的 `localizationsDelegates` 和 `supportedLocales`

在 `main.dart` 中配置 `MaterialApp`，启用本地化支持。

```dart
// main.dart

import 'package:flutter/material.dart';
import 'localization/app_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Localizations Demo',
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: AppLocalizations.supportedLocales,
      home: MyHomePage(),
    );
  }
}
```

---

## ✅ 3. 实现本地化字符串

你可以将不同语言的字符串放在一个文件中，比如 `lib/localization/strings.json`，或者使用 `intl` 包生成代码。

### 示例：手动定义本地化字符串

```dart
// lib/localization/app_localizations_delegate.dart

import 'package:flutter/material.dart';
import 'app_localizations.dart';

class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();

@override
  bool isSupported(Locale locale) => ['en', 'zh'].contains(locale.languageCode);

@override
  Future<AppLocalizations> load(Locale locale) async {
    return AppLocalizations(locale);
  }

@override
  bool shouldReload(AppLocalizationsDelegate old) => false;
}
```

---

## ✅ 4. 在页面中使用本地化字符串

```dart
// lib/screens/home_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appLocalizations = AppLocalizations.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(appLocalizations.welcomeMessage),
      ),
      body: Center(
        child: Text(appLocalizations.helloWorld),
      ),
    );
  }
}
```

---

## ✅ 5. 可选：使用 flutter_gen 自动生成本地化类

如果你希望更方便地管理本地化字符串，可以使用 `flutter_gen` 插件自动生成本地化类。

### 安装 flutter_gen

```yaml
# pubspec.yaml

dev_dependencies:
  flutter_gen: ^4.8.0
```

然后运行：

```bash
flutter pub get
flutter gen-l10n
```

这会自动生成 `app_localizations.dart`、`app_localizations_en.arb` 等文件。

---

## ✅ 6. 添加语言资源文件（如使用 flutter_gen）

在 `lib/l10n/` 目录下添加 `.arb` 文件：

- `app_localizations_en.arb`
- `app_localizations_zh.arb`

示例 `app_localizations_en.arb`:

```json
{
  "welcomeMessage": "Welcome to Flutter!",
  "helloWorld": "Hello, World!"
}
```

---

## ✅ 总结

| 步骤 | 内容 |
|------|------|
| 1 | 创建 `AppLocalizations` 类 |
| 2 | 配置 `MaterialApp` 的 `localizationsDelegates` 和 `supportedLocales` |
| 3 | 实现本地化字符串（可选使用 flutter_gen） |
| 4 | 在页面中使用 `AppLocalizations.of(context)` 获取本地化内容 |

---

如果你需要我帮你生成完整的项目结构或具体的本地化文件，请告诉我你的目标语言和内容，我可以进一步协助。