Flutter国际化插件nls的使用

Flutter国际化插件nls的使用

在Flutter开发中,国际化是一个非常重要的功能。本文将介绍如何使用nls插件来实现Flutter应用的国际化功能。

使用步骤

1. 添加依赖

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

dependencies:
  nls: ^版本号

然后运行以下命令以获取依赖:

flutter pub get

2. 初始化插件

main.dart文件中初始化nls插件并设置事件监听器。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:nls/nls.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  String qrCode = "";
  final _nlsPlugin = Nls();

  static const EventChannel _eventChannel = EventChannel('nlsresult');
  StreamSubscription? _streamSubscription;

  @override
  void initState() {
    super.initState();
    initPlatformState();
    // 监听来自原生端的消息
    _streamSubscription =
        _eventChannel.receiveBroadcastStream().listen((value) {
      try {
        print(value);
        setState(() {
          qrCode = value;
        });
      } catch (e, s) {
        print("e:" + e.toString());
        print(s);
      }
    });
  }

  // 获取平台版本信息
  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion =
          await _nlsPlugin.getPlatformVersion() ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  @override
  void dispose() {
    super.dispose();
    _streamSubscription?.cancel(); // 取消订阅以释放资源
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('NLS SCAN'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Padding(
              padding: const EdgeInsets.all(10),
              child: Text(qrCode), // 显示扫描结果
            ),
            Padding(
              padding: const EdgeInsets.all(10),
              child: ElevatedButton(
                  onPressed: () {
                    _nlsPlugin.scan(); // 触发扫描操作
                  },
                  child: const Text("Scan")),
            )
          ],
        ),
      ),
    );
  }
}

3. 原生端集成

Android 端

AndroidManifest.xml中添加必要的权限和配置:

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />

<application>
  <activity android:name=".MainActivity">
    <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
</application>

MainActivity.java中注册广播通道:

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.plugin.common.EventChannel;
import io.flutter.plugin.common.MethodChannel;

public class MainActivity extends FlutterActivity {
  private static final String CHANNEL = "nlsresult";

  @Override
  public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
    super.configureFlutterEngine(flutterEngine);

    new EventChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
        .setStreamHandler(new EventChannel.StreamHandler() {
          @Override
          public void onListen(Object arguments, EventChannel.EventSink events) {
            // 收到消息时触发回调
            events.success("扫描成功");
          }

          @Override
          public void onCancel(Object arguments) {
            // 取消监听时触发
          }
        });
  }
}

iOS 端

AppDelegate.swift中注册广播通道:

import UIKit
import Flutter

[@UIApplicationMain](/user/UIApplicationMain)
[@objc](/user/objc) class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
    let channel = FlutterEventChannel(name: "nlsresult", binaryMessenger: controller.binaryMessenger)
    
    channel.setStreamHandler({
      (arguments: Any?, eventSink: FlutterEventSink) -> FlutterError? in
      // 收到消息时触发回调
      eventSink("扫描成功")
      return nil
    })

    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}
1 回复

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


在Flutter中,nls 是一个用于国际化的插件,它可以帮助你轻松地管理和加载不同语言的字符串资源。以下是如何使用 nls 插件的基本步骤:

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  nls: ^1.0.0  # 请使用最新版本

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

2. 创建语言文件

lib 目录下创建一个 l10n 文件夹,并在其中创建不同语言的 .arb 文件。例如:

  • app_en.arb (英语)
  • app_zh.arb (中文)

每个 .arb 文件包含键值对,表示不同语言的字符串资源。例如:

app_en.arb:

{
  "hello": "Hello",
  "welcome": "Welcome to Flutter"
}

app_zh.arb:

{
  "hello": "你好",
  "welcome": "欢迎使用 Flutter"
}

3. 生成本地化类

使用 nls 插件生成本地化类。在终端中运行以下命令:

flutter pub run nls:generate

这将根据 .arb 文件生成一个本地化类,通常命名为 AppLocalizations

4. 配置 MaterialApp

MaterialApp 中配置本地化支持:

import 'package:flutter/material.dart';
import 'package:nls/nls.dart';
import 'generated/l10n.dart';  // 生成的本地化类

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: [
        AppLocalizations.delegate,  // 添加本地化代理
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),  // 英语
        const Locale('zh', ''),  // 中文
      ],
      home: MyHomePage(),
    );
  }
}

5. 使用本地化字符串

在应用程序中使用生成的本地化字符串:

import 'package:flutter/material.dart';
import 'generated/l10n.dart';

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).welcome),
      ),
      body: Center(
        child: Text(AppLocalizations.of(context).hello),
      ),
    );
  }
}

6. 切换语言

你可以通过 Locale 来动态切换语言。例如:

void _changeLanguage(BuildContext context, Locale locale) {
  MyApp.setLocale(context, locale);
}

7. 处理语言切换

MyApp 中添加一个静态方法来处理语言切换:

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();

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

class _MyAppState extends State<MyApp> {
  Locale _locale;

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      locale: _locale,
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''),
        const Locale('zh', ''),
      ],
      home: MyHomePage(),
    );
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!