Flutter本地化与翻译插件localize_and_translate的使用

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

Flutter本地化与翻译插件localize_and_translate的使用

Flutter应用在面向全球用户时,支持多语言是非常重要的功能之一。localize_and_translate 是一个非常实用的插件,它可以帮助开发者轻松实现Flutter应用的多语言支持。

Getting Started

安装

首先,在你的pubspec.yaml文件中添加依赖:

dependencies:
  localize_and_translate: ^last_version

创建并配置语言文件夹和文件,例如:

assets
└── lang
    ├── en.json
    └── zh.json 

然后在pubspec.yaml中声明这些资源文件的位置:

flutter:
  assets:
    - assets/lang/

对于iOS平台,确保你已经在ios/Runner/Info.plist文件中指定了支持的语言:

<key>CFBundleLocalizations</key>
<array>
  <string>en</string>
  <string>zh</string>
</array>

配置

接下来,在应用程序入口处初始化LocalizeAndTranslate,并将其集成到MaterialApp中:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await LocalizeAndTranslate.init(
    assetLoader: const AssetLoaderRootBundleJson('assets/lang/'),
    supportedLanguageCodes: ['ar', 'en'],
  );

  runApp(
    LocalizedApp(
      child: MaterialApp(
        builder: LocalizeAndTranslate.directionBuilder,
        home: MyHomePage(),
        locale: context.locale,
        localizationsDelegates: context.delegates,
        supportedLocales: context.supportedLocales,
      ),
    ),
  );
}

使用方法

初始化

main函数中调用LocalizeAndTranslate.init()以加载翻译资源:

await LocalizeAndTranslate.init(
  assetLoader: const AssetLoaderRootBundleJson('assets/lang/'),
  supportedLocales: [Locale('ar', 'EG'), Locale('en', 'US')],
);

或者通过网络加载:

await LocalizeAndTranslate.init(
  assetLoader: const AssetLoaderNetwork({
    'ar': 'https://example.com/ar.json',
    'en': 'https://example.com/en.json',
  }),
  supportedLocales: [Locale('ar', 'EG'), Locale('en', 'US')],
);

翻译文本

使用tr()方法来获取对应语言的字符串:

Text('hello_world'.tr())

如果需要设置默认值(当找不到匹配的键时),可以这样做:

Text('missing_key'.tr(defaultValue: 'Default Value'))

切换语言

可以通过context.setLanguageCode('new_code')context.setLocale(new_locale)来动态切换当前使用的语言环境。

示例代码展示了如何构建一个简单的界面,允许用户点击按钮切换语言,并更新UI显示:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('app_title'.tr()),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            final newLang = LocalizeAndTranslate.getLanguageCode() == 'en' ? 'ar' : 'en';
            LocalizeAndTranslate.setLanguageCode(newLang);
            debugPrint('new lang: $newLang -- context.locale: ${context.locale}');
          },
          child: Text('change_language'.tr()),
        ),
      ),
    );
  }
}

以上就是关于localize_and_translate插件的基本介绍及使用方式,希望对你有所帮助!如果你有任何问题或需要更详细的说明,请参考官方文档或访问GitHub项目页面


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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用localize_and_translate插件进行本地化与翻译的示例代码。这个插件允许你轻松地在Flutter应用中实现多语言支持。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加localize_and_translate依赖:

dependencies:
  flutter:
    sdk: flutter
  localize_and_translate: ^3.0.0  # 请确保使用最新版本

然后运行flutter pub get来安装依赖。

2. 创建翻译文件

在你的项目根目录下创建一个assets/lang文件夹,并在其中创建不同的语言文件,例如en.jsonzh.json

assets/lang/en.json:

{
  "welcome": "Welcome",
  "goodbye": "Goodbye"
}

assets/lang/zh.json:

{
  "welcome": "欢迎",
  "goodbye": "再见"
}

3. 更新pubspec.yaml以包含翻译文件

pubspec.yaml中添加对翻译文件的引用:

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

4. 初始化LocalizeAndTranslate

在你的主文件中(通常是main.dart),初始化LocalizeAndTranslate并进行配置:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LocalizeAndTranslate(
      supportedLocales: [
        Locale('en', ''),
        Locale('zh', ''),
      ],
      fallbackLocale: Locale('en', ''),
      useOnlyLangCode: false,
      assetsPath: 'assets/lang/',
      builder: (context, child, locale) {
        return MaterialApp(
          locale: locale,
          supportedLocales: [
            Locale('en', ''),
            Locale('zh', ''),
          ],
          localizationsDelegates: [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
            LocalizeAndTranslate.delegate,
          ],
          localeResolutionCallback: (locale, supportedLocales) {
            for (var supportedLocale in supportedLocales) {
              if (supportedLocale.languageCode == locale?.languageCode ||
                  supportedLocale.countryCode == locale?.countryCode) {
                return supportedLocale;
              }
            }
            return supportedLocales.first;
          },
          home: HomeScreen(),
        );
      },
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    final LocalizeAndTranslate loc = LocalizeAndTranslate.of(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(loc.translate('welcome')),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(loc.translate('welcome')),
            SizedBox(height: 20),
            Text(loc.translate('goodbye')),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                title: Text(loc.translate('change_language')),
                content: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    ListTile(
                      leading: Icon(Icons.language),
                      title: Text('English'),
                      onTap: () {
                        loc.setLocale(Locale('en', ''));
                        Navigator.of(context).pop();
                      },
                    ),
                    ListTile(
                      leading: Icon(Icons.flag),
                      title: Text('中文'),
                      onTap: () {
                        loc.setLocale(Locale('zh', ''));
                        Navigator.of(context).pop();
                      },
                    ),
                  ],
                ),
                actions: <Widget>[
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: Text(loc.translate('cancel')),
                  ),
                ],
              );
            },
          );
        },
        tooltip: 'Change Language',
        child: Icon(Icons.translate),
      ),
    );
  }
}

5. 运行应用

现在,你可以运行你的Flutter应用,并看到初始页面显示的是英文(或其他你设置的默认语言)。点击浮动操作按钮(FAB)将弹出一个对话框,允许你切换到中文。切换语言后,应用将即时更新显示的文本。

这个示例展示了如何使用localize_and_translate插件在Flutter应用中实现多语言支持。你可以根据需要扩展这个示例,添加更多的语言和翻译字符串。

回到顶部