Flutter本地化与底部表单插件easy_localization_sheet的使用

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

Flutter本地化与底部表单插件easy_localization_sheet的使用

在Flutter应用开发中，处理多语言支持（即本地化）是一个常见的需求。为了简化这一过程，可以使用easy_localization插件配合easy_localization_sheet来管理翻译文件。本文将介绍如何使用easy_localization_sheet插件生成JSON文件，并将其集成到Flutter项目中以实现本地化。

安装

首先，在你的项目中添加easy_localization_sheet作为开发依赖项：

dependencies:
    ...
dev_dependencies:
    ...
    easy_localization_sheet: <last_version>

可以通过以下命令之一来安装：

dart pub add --dev easy_localization_sheet
flutter pub add --dev easy_localization_sheet

请确保替换<last_version>为最新版本号。

使用

接下来，在你的pubspec.yaml文件中加入如下配置：

easy_localization_sheet:
    csv_url: 'your url'
    output_dir: 'assets/translations' # 可选，默认是assets
    easy_localization_generate: # 用于运行easy_localization:generate命令，如果不需要可以移除此块
        output_dir: lib/generated
        output_file_name: locale_keys.g.dart

然后执行以下命令来生成JSON文件：

dart run easy_localization_sheet
# 或者
flutter pub run easy_localization_sheet

示例

假设你有一个公开的Google Sheets文档，你可以通过以下步骤获取CSV链接并生成JSON文件：

  1. 将Google Sheets设为公开。
  2. 从Google Sheets URL中提取SHEET_ID：例如https://docs.google.com/spreadsheets/d/{SHEET_ID}/edit#gid=0
  3. 设置csv_url: https://docs.google.com/spreadsheets/d/{YOUR_ID}/export?format=csv
  4. 执行上述提到的命令来生成JSON文件。

语法说明

  • key列是必需的，它充当了每行数据的标识符。
  • 表头上方的任何行都会被忽略。
  • 如果要忽略某个列，请将其名称放在括号内，如(ignore_column)。
  • 支持嵌套键值对。

例如，对于下面的键值：

gender.male
gender.female

将会生成如下JSON结构：

{
  "gender": {
    "male": "Male",
    "female": "Female"
  }
}

更多详情可以参考示例表格。

示例代码

虽然提供的示例代码仅包含一个简单的计算函数，但在实际项目中，你需要根据生成的JSON文件来设置你的应用程序进行本地化。例如：

import 'package:easy_localization/easy_localization.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return EasyLocalization(
      supportedLocales: [Locale('en', 'US'), Locale('es', 'ES')],
      path: 'assets/translations',
      fallbackLocale: Locale('en', 'US'),
      child: MaterialApp(
        home: Home(),
      ),
    );
  }
}

class Home extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('title').tr()),
      body: Center(child: Text('hello_world').tr()),
    );
  }
}

更多关于Flutter本地化与底部表单插件easy_localization_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter本地化与底部表单插件easy_localization_sheet的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，本地化是开发多语言应用的关键步骤。easy_localization 是一个流行的库，用于简化这个过程。结合 easy_localization_sheet 插件，你可以轻松实现底部表单（Bottom Sheet）的本地化功能。下面是一个具体的代码示例，展示如何使用这两个插件来实现Flutter应用的本地化，并在底部表单中显示本地化的内容。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 easy_localization 和 easy_localization_sheet 的依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_localization: ^3.0.0 # 请检查最新版本
  easy_localization_sheet: ^0.1.0 # 请检查最新版本

2. 设置本地化资源

在项目的 assets 文件夹下创建 locales 文件夹，并在其中添加你的翻译文件，例如 en.json 和 zh.json。

en.json:

{
  "welcome": "Welcome",
  "bottom_sheet_title": "Select Language",
  "cancel": "Cancel",
  "english": "English",
  "chinese": "Chinese"
}

zh.json:

{
  "welcome": "欢迎",
  "bottom_sheet_title": "选择语言",
  "cancel": "取消",
  "english": "英语",
  "chinese": "中文"
}

3. 配置 main.dart

接下来，配置你的 main.dart 文件以使用 easy_localization 和 easy_localization_sheet。

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:easy_localization_sheet/easy_localization_sheet.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();
  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en', ''), Locale('zh', '')],
      path: 'assets/locales', // 路径到翻译文件
      fallbackLocale: Locale('en', ''), // 默认语言
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(tr('welcome')), // 使用 tr() 函数获取本地化字符串
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showEasyLocalizationSheet(
              context: context,
              title: tr('bottom_sheet_title'), // 底部表单标题
              items: [
                EasyLocalizationSheetItem(
                  title: tr('english'),
                  locale: Locale('en', ''),
                ),
                EasyLocalizationSheetItem(
                  title: tr('chinese'),
                  locale: Locale('zh', ''),
                ),
              ],
              cancelText: tr('cancel'), // 取消按钮文本
              onLocaleSelected: (locale) {
                context.setLocale(locale); // 设置选中的语言
              },
            );
          },
          child: Text(tr('change_language')), // 假设有一个改变语言的按钮
        ),
      ),
    );
  }
}

4. 确保翻译文件正确加载

确保你的翻译文件已经正确放置在 assets/locales 文件夹下，并且在 pubspec.yaml 中已经声明了这些资源：

flutter:
  assets:
    - assets/locales/en.json
    - assets/locales/zh.json

5. 运行应用

现在，你可以运行你的Flutter应用。当你点击按钮时，应该会看到一个底部表单，列出了可用的语言选项，点击选项后应用将切换到相应的语言。

这个示例展示了如何使用 easy_localization 和 easy_localization_sheet 来实现Flutter应用的本地化，并在底部表单中显示本地化的内容。根据具体需求，你可以进一步自定义和扩展这些功能。

回到顶部