Flutter本地化翻译插件json_translation的使用

特性

• 使用JSON文件来翻译您的应用程序。

开始

在你的项目中添加json_translation依赖包：

flutter pub add json_translation

使用

查看示例。

按语言添加JSON文件

在locales路径下为每种支持的语言添加一个JSON文件，并在pubspec.yaml中描述它。

路径必须为./locales

flutter:
  assets:
    - locales/

使用一个JSON文件/对象来表示应用本地化的键:String/值:String对。

示例项目树

JSON文件名必须与supportedLocales中描述的语言代码完全匹配。

lib/
locales/
    en.json
    fr.json

示例JSON文件

// en.json
{
	"hello-world": "Hello World."
}

// fr.json
{
	"hello-world": "Bonjour à tous."
}

示例MaterialApp

在MaterialApp的localizationsDelegates中添加JsonTranslation.delegate。

MaterialApp(
    localizationsDelegates: const [
        JsonTranslation.delegate,
        ...GlobalMaterialLocalizations.delegates,
    ],
    supportedLocales: const [
        Locale('en'),
        Locale('fr'),
    ],
);

示例

使用$()函数进行关键词翻译。

import 'package:json_translation/json_translation.dart';

Container(
    child: Text($("hello-world"))
)

贡献

您可以以多种方式为本项目做出贡献！您可以：

• 在GitHub上 Fork
• 提交 一个错误报告
• 向开发者 捐赠

完整示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:json_translation/json_translation.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();

  static void setLocale(BuildContext context, Locale locale) {
    _MyAppState state = context.findAncestorStateOfType<_MyAppState>()!;
    state.setLocale(locale);
  }
}

class _MyAppState extends State<MyApp> {
  // 这个小部件是您的应用程序的根节点。

  Locale _locale = const Locale.fromSubtags(languageCode: 'en');

  void setLocale(Locale locale) {
    setState(() {
      _locale = locale;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JSON Translation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'JSON Translation Demo'),
      localizationsDelegates: const [
        JsonTranslation.delegate,
        ...GlobalMaterialLocalizations.delegates,
      ],
      supportedLocales: const [
        Locale('en'),
        Locale('fr'),
      ],
      locale: _locale,
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int index = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {

    // 初始化插件
    JsonTranslation.init(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示翻译文本
            Text($("hello-world")),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: index,
        onTap: (value) {
          setState(() {
            index = value;
          });
          String lang;
          switch (index) {
            case 0:
              lang = 'en';
              break;
            case 1:
              lang = 'fr';
              break;
            default:
              lang = 'en';
          }
          MyApp.setLocale(context, Locale.fromSubtags(languageCode: lang));
        },
        items: const [
          BottomNavigationBarItem(
            icon: Text("EN"),
            label: 'English',
          ),
          BottomNavigationBarItem(
            icon: Text("FR"),
            label: 'French',
          ),
        ],
      ),
    );
  }
}