Flutter语言流处理插件stream_language的使用

Flutter语言流处理插件stream_language的使用

检查Pub.Dev

查看详细信息请访问 Pub.Dev

动图展示

帮助维护

如果您能帮助我维护这些仓库，我会非常感激。您可以为我买一杯咖啡来表示支持。

注意： 如果希望本地控制JSON文件，请使用此库：multi_language_json

开始使用

首先，您需要创建一个具有以下属性的对象：

var language = LanguageController(
  child: 'languages',      
  defaultPrefix: 'pt_BR',
  commonRoute: 'default'
);

LanguageController 是一个单例，在第一次启动后，它将拥有相同的属性。

Child

在您的实时数据库中，包含应用程序语言的子节点。例如：

每个子节点必须以语言和国家的ISO代码命名，如上图所示。

DefaultPrefix

这里将告知当连接的设备语言不在数据库中时的默认首页语言。

CommonRoute

在这里输入语言节点内包含可以在多个屏幕上使用的单词的节点。例如：

首次使用Firebase语言时，应该这样做：

final language = LanguageController(
    child: 'languages',
    defaultPrefix: 'pt_BR',
    commonRoute: 'default'
);

[@override](/user/override)
Widget build(BuildContext context) {
  return FirstLanguageStart(
    future: language.init(),
    builder: (c) => StreamLanguage(
      screenRoute: ['screen-1'],
      builder: (data, route, def) => Scaffold(
        appBar: AppBar(
          title: Text(route['title']),
        ),
        body: Center(
          child: ElevatedButton(
              child: Text(route['btn']),
              onPressed: () => language.showAlertChangeLanguage(
                  context: context,
                  title: def['change-language']['title'],
                  btnNegative: def['change-language']['btn-negative']
              )
          )
        )
      )
    )
  );
}

从第二次开始，您只需使用 StreamLanguage 小部件。第一个是必需的，因为第一次应用需要下载所有语言并从用户的手机语言启动默认语言。

Widget StreamLanguage

ScreenRoute

这是魔法发生的地方，作为参数接收屏幕路由。在上面的代码中，它看起来像这样：

screenRoute: ['screen-1']

在Firebase中，它看起来像这样：

如果路由是在 ‘screen-1’ 节点内的子节点，您可以这样做：

screenRoute: ['screen-1', 'route_inside']

Builder

构造函数接受三个字段作为参数：data、route 和 def

Data

data 包含当前语言的所有节点。

Route

route 包含通过 ScreenRoute 传递的所有节点。

Def

def 包含作为参数传递给 LanguageController 构造函数的 commonRoute 中的所有节点。

更改语言

为此，每个语言节点必须有一个名为 config 的子节点，包含以下属性：

之后，您可以调用以下方法：

language.showAlertChangeLanguage(
    context: context,
    title: def['change-language']['title'],
    btnNegative: def['change-language']['btn-negative']
)

这将显示一个对话框，如下所示（语言和标志列表是从传递到 config 节点的数据自动完成的）：

要编程方式更改语言，只需调用此方法并传递语言前缀，例如：

LanguageController.changeLanguage('pt_BR');

完整示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final language = LanguageController(
    child: 'languages',
    defaultPrefix: 'pt_BR',
    commonRoute: 'default'
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FirstLanguageStart(
      control: language,
      builder: (c) {
        return StreamLanguage(
          screenRoute: ['screen-1'],
          builder: (data, route, def) => Scaffold(
            appBar: AppBar(
              title: Text(route['title']),
            ),
            body: Center(
              child: ElevatedButton(
                child: Text(route['btn']),
                onPressed: () => language.showAlertChangeLanguage(
                  context: context,
                  title: def['change-language']['title'],
                  btnNegative: def['change-language']['btn-negative']
                )
              )
            )
          )
        );
      }
    );
  }
}