Flutter JSON翻译插件json_translator的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter JSON翻译插件json_translator的使用

这是一款用于Flutter应用本地化的命令行Dart应用程序。它读取一个JSON文件，将其中的值翻译成指定的语言，并生成一个已翻译的JSON文件。这对于Flutter应用的本地化非常有用。

使用说明

这个程序可以在pub.dev上找到，你可以通过以下方式使用：

  1. 作为可执行文件使用：

    dart pub global activate json_translator

    如果显示警告信息，你需要将高亮显示的目录添加到系统环境变量Path中，以便允许可执行文件运行。添加后，运行以下命令：

    json_translator

  2. 克隆源代码并运行：

    git clone https://github.com/rijalsandeshraj/json_translator.git
cd json_translator
dart run

运行步骤

  1. 运行程序。
  2. 输入JSON文件的路径。
  3. 程序会检测文件是否存在。
  4. 输入有效的语言代码以翻译成特定语言（如果没有提供语言代码，默认为"en"）。
  5. 程序会检测输入的语言代码是否有效或受支持。
  6. 如果路径和语言代码都有效，则会在终端显示翻译结果，并在工作目录中创建一个已翻译的JSON文件。

输出结果

输出的JSON文件将在工作目录中以entered_language_code.json的形式创建。

额外信息

使用Prettier扩展来格式化你的JSON文件。根据需要编辑文件。将以下内容添加到settings.json中以格式化JSON文件：

"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

由于JSON文件中不能写注释，并且本地化是使用.arb文件进行的，你可以将JSON文件的扩展名改为.arb。这些文件有定义注释的语法。社区建议使用特殊语法，例如"@_LOGIN_PAGE": {}，作为编写注释的约定，但当文件变大时，它们可能不太显眼。因此，可以使用VS Code扩展程序Highlight来突出显示这些部分标题：

安装该扩展程序后，在settings.json中添加以下条目：

"highlight.regexes": {
   "(\"@_.+\": {},)": {
     "filterFileRegex": ".*\\.(arb|json)",
     "decorations": [
       {
         "overviewRulerColor": "#d19a66",
         "backgroundColor": "#d19a66",
         "color": "#282c34",
         "fontWeight": "bold"
       }
     ]
   }
 }

现在，文件中的注释会被高亮显示！

有关使用.arb文件进行本地化的有趣文章，可以查看： https://yapb.dev/tips-and-tricks-13-tips-when-working-with-arb-files-for-localization

使用该包并欢迎反馈！😊💖

示例代码

以下是示例代码，位于example/main.dart文件中：

import 'package:json_translator/src/json_translator.dart' as json_translator;

void main() {
  /// 这个程序是发布在pub.dev上的，所以你可以这样使用这个包：
  ///
  /// 1. 作为可执行文件使用，运行以下命令：
  /// > dart pub global activate json_translator
  /// > json_translator
  ///
  /// 2. 或者，克隆源代码并运行以下命令：
  /// > dart run

  json_translator.main();
}

更多关于Flutter JSON翻译插件json_translator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter JSON翻译插件json_translator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用json_translator插件来翻译JSON数据的示例代码。json_translator插件允许你将JSON数据从一种语言翻译成另一种语言。不过请注意，为了演示的简洁性，这里假设你已经有一个运行中的Flutter项目，并且已经添加了json_translator依赖。

首先，确保在你的pubspec.yaml文件中添加json_translator依赖：

dependencies:
  flutter:
    sdk: flutter
  json_translator: ^最新版本号  # 请替换为实际的最新版本号

然后运行flutter pub get来获取依赖。

接下来，是一个简单的示例，展示如何使用json_translator插件：

  1. 创建一个JSON文件（例如data.json），内容如下：
{
  "greeting": "Hello, World!",
  "farewell": "Goodbye!"
}
  1. 在Flutter项目中读取并翻译JSON数据：
import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:async';
import 'package:json_translator/json_translator.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('JSON Translator Demo'),
        ),
        body: FutureBuilder<Map<String, String>>(
          future: fetchAndTranslateJson(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              if (snapshot.hasError) {
                return Center(child: Text('Error: ${snapshot.error}'));
              } else {
                return ListView.builder(
                  itemCount: snapshot.data?.keys?.length,
                  itemBuilder: (context, index) {
                    final key = snapshot.data?.keys?.elementAt(index);
                    final value = snapshot.data?[key];
                    return ListTile(
                      title: Text('${key}: ${value}'),
                    );
                  },
                );
              }
            } else {
              return Center(child: CircularProgressIndicator());
            }
          },
        ),
      ),
    );
  }

  Future<Map<String, String>> fetchAndTranslateJson() async {
    // 读取本地JSON文件（在实际应用中，你可能会从网络获取JSON）
    String jsonString = await rootBundle.loadString('assets/data.json');
    Map<String, dynamic> jsonMap = jsonDecode(jsonString);

    // 初始化JsonTranslator（这里使用Google Translate API作为示例）
    final translator = JsonTranslator(
      apiKey: 'YOUR_GOOGLE_TRANSLATE_API_KEY',  // 请替换为你的Google Translate API密钥
      sourceLang: 'en',  // 源语言
      targetLang: 'es',  // 目标语言
    );

    // 翻译JSON数据
    Map<String, String> translatedMap = await translator.translateJson(jsonMap);

    return translatedMap;
  }
}

注意：

  1. 在实际项目中，你可能需要从网络获取JSON数据，而不是从本地文件。你可以使用http包或其他网络请求库来完成这个任务。
  2. YOUR_GOOGLE_TRANSLATE_API_KEY需要替换为你自己的Google Translate API密钥。如果没有，你需要前往Google Cloud Platform申请一个。
  3. sourceLang和targetLang参数指定了源语言和目标语言，你可以根据需要更改它们。

以上代码演示了如何读取一个JSON文件，使用json_translator插件将其翻译成另一种语言，并在Flutter应用中显示翻译后的结果。希望这对你有所帮助！

回到顶部