flutter多语言处理，解决加载json文件黑屏问题

flutter 多语言处理

• 目前就我而言接触到两种比较优雅的处理方式
  • 第一种是设置抽象类，不同的语言有不同的实现，当初始化时或者语言切换时创建对应语言的实例即可，优点是实现优雅，缺点是不好维护
  • 第二种是使用json文件，每一种语言是一个json文件，初始化时加载对应语言的json文件即可，优点是方便维护，缺点是实现方式比较挫，并且加载json时比较耗时，会导致黑一下才进入flutter的splash界面
• 现在既想要方便维护，又想要性能怎么办？

将json文件转为dart文件，使用map保存字符串

• 初步设想，能不能直接用dart维护这个json文件，因为dart的map和json就差一个变量名了

zh.json : {
"appNam":"应用名字",
"appVersion": "应用版本"
}
en.json : {  
"appNam":"app name",
"appVersion": "app version"
}

• 使用var localMap = json.decode(await rootBundle.loadString(zh.json))加载json文件，后面所有需要的的地方使用localMap["appName"]即可，如果当前是英文，则加载en.json文件
• 这里有个问题，一般操作是自定义LocalizationsDelegate然后在load方法中初始化多语言，并把自定义的deleget给MaterialApp下的localizationsDelegates，如果在这里用了await，意味着app会黑一下才能进入MaterialApp的home页面

main() {
    runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:splashPage(),// 开屏页面
      localizationsDelegates:MyLocalizationsDelegate()
    )
  }
}
// 保存语言的map
class MyLocalizations {
    static MyLocalizations instance;
    Map globalLocalMap;
}
// 自定义的多语言delegate，flutter会在初始化时调用load方法
class MyLocalizationsDelegate extends LocalizationsDelegate {
  MyLocalizations local = MyLocalizations();
  @override
  Future load(Locale locale) async {
      local.globalLocalMap = json.decode(await rootBundle.loadString(zh.json));
      MyLocalizations.instance = local;
      return SynchronousFuture(MyLocalizations.instance);
  }
}

• 如上所示，如果在load方法中加载json文件，会导致app黑屏，时间取决于await

将json转为dart文件

• 使用个art文件代替json，去除加载json的操作，避免黑屏

zh.dart :
var zh = {
"appNam":"应用名字",
"appVersion": "应用版本"
};
en.dart :
var en = {
"appNam":"app name",
"appVersion": "app version"
}

• 此时将load方法改写，因为只有使用到en或者zh的map时，才会去加载这个变量，所以不会有都加载到内存的问题（切换语言，gc后没用的会被销毁）

class MyLocalizationsDelegate extends LocalizationsDelegate {
  MyLocalizations local = MyLocalizations();
  @override
  Future load(Locale locale) async {
      if ("en" == locale.languageCode) {
          local.globalLocalMap = en;// 这个en，就是en.dart文件里面的那个map
      } else if ("zh" == locale.languageCode) {
          local.globalLocalMap = zh;
      } else {
          local.globalLocalMap = zh;// 如果当前系统的语言app不支持，默认为中文
      }
      MyLocalizations.instance = local;
      return SynchronousFuture(MyLocalizations.instance);
  }
}

• 这样解决了性能和维护的问题

可以使用第三方工具来维护多语言，比如phraseapp

• phraseapp可以上传某个语言的json文件，然后生成其他语言的json文件(貌似需要购买或者让翻译团队翻译)
• 得到多个语言的json文件后，可以手动转成dart，也可以弄个脚本
• 脚本灰常简单，具体就不贴了，用sed将第一行"{"替换成"var 符号记得替换成$哦

最近遇到多语言的处理，搞了搞解决了就分享出来，flutter小白一个，欢迎交流指正~