位置：首页-资讯-移动开发

flutter开发实战-多语言flutter intl

2023-09-14 06:29

短信预约 -IT技能 免费直播动态提醒

flutter开发实战-多语言flutter intl

之前做的应用中有用到多语言，一直没有整理，这里整理一下多语言设置流程。
使用的是Android studio

一、flutter_intl 插件

使用Android studio安装flutter_intl 插件，更新或者安装flutter_intl 插件后会提示重新启动IDE。

如图所示：
在这里插入图片描述

二、使用fluter_intl插件

在Android Studio中菜单Tools找到flutter intl创建多语言配置。

在这里插入图片描述

创建后会在pubspec.yaml出现

flutter_intl:  enabled: true

如图所示
在这里插入图片描述

在工程的lib会生成l10n与generated文件夹

l10n包含
intl_en.arb
intl_zn.arb

我们在intl_en.arb添加

{'home': "Home",}

在intl_zn.arb添加

{'home': "首页",}

三、编写代码

创建LocalModel

// 共享状态class SessionChangeNotifier with ChangeNotifier {  Session get session => Global.session;  String? get getToken => Global.session.token;  @override  void notifyListeners() {    // 保存Profile变更    Global.saveProfile();    //通知依赖的Widget更新    super.notifyListeners();  }}

创建LocalModel

class LocaleModel extends SessionChangeNotifier {  // 获取当前用户的APP语言配置Locale类，如果为null，则语言跟随系统语言  Locale? getLocale() {    if (session.locale == null) return null;    var t = session.locale?.split("_");    LoggerManager().debug("getLocale t:${t}");    if (t != null && t.length == 2) {      LoggerManager().debug("Locale t:${t}");      return Locale(t[0], t[1]);    }    return null;  }  // 获取当前Locale的字符串表示  String get locale => session.locale ?? "";  // 用户改变APP语言后，通知依赖项更新，新语言会立即生效  set locale(String locale) {    LoggerManager().debug("locale:${locale}, profile.locale:${session.locale}");    if (locale != session.locale) {      session.locale = locale;      notifyListeners();    }  }}

在Main的入口中设置

class MyApp extends StatelessWidget {  const MyApp({Key? key}) : super(key: key);  // This widget is the root of your application.  @override  Widget build(BuildContext context) {    return MultiProvider(      providers: providers,      child: Consumer3<ThemeModel, LocaleModel, UserModel>(        builder: (context, themeModel, localeModel, userModel, child) {          return RefreshConfiguration(            hideFooterWhenNotFull: false, //列表数据不满一页,不触发加载更多            child: ScreenUtilInit(              designSize: const Size(375.0, 667.0),              minTextAdapt: true,              splitScreenMode: true,              builder: (context, child) {                return child ??                    buildMaterialApp(                        context, localeModel, themeModel, userModel);              },              child:                  buildMaterialApp(context, localeModel, themeModel, userModel),            ),          );        },      ),    );  }  Widget buildMaterialApp(BuildContext context, LocaleModel localeModel,      ThemeModel themeModel, UserModel userModel) {    return MaterialApp(      theme: ThemeData(        fontFamily: "PingFang SC",        primarySwatch: themeModel.theme,      ),      navigatorKey: OneContext().key,      debugShowCheckedModeBanner: false,      supportedLocales: S.delegate.supportedLocales,      locale: localeModel.getLocale(),      initialRoute: buildInitialRoute(        appModel: Provider.of<AppModel>(context, listen: false),        userModel: userModel,      ),      onGenerateRoute: RouterManager.generateRoute,      navigatorObservers: buildObservers(),      localizationsDelegates: const [        S.delegate,        RefreshLocalizations.delegate, //下拉刷新        GlobalCupertinoLocalizations.delegate,        GlobalMaterialLocalizations.delegate,        GlobalWidgetsLocalizations.delegate      ],      localeResolutionCallback: (_locale, supportedLocales) {        if (localeModel.getLocale() != null) {          //如果已经选定语言，则不跟随系统          return localeModel.getLocale();        } else {          //跟随系统          LoggerManager().debug("_locale：${_locale}");          Locale locale;          if (supportedLocales.contains(_locale)) {            locale = _locale!;          } else {            //如果系统语言不是中文简体或美国英语，则默认使用美国英语            locale = Locale('en', 'US');          }          return locale;        }      },      builder: EasyLoading.init(builder: (BuildContext context, Widget? child) {        return OneContext().builder(          context,          child,          observers: buildObservers(),        );      }),      home: buildGlobalGesture(context),    );  }  Widget buildGlobalGesture(BuildContext context) {    return GestureDetector(      onTap: () {        FocusScopeNode currentFocus = FocusScope.of(context);        if (!currentFocus.hasPrimaryFocus &&            currentFocus.focusedChild != null) {          FocusManager.instance.primaryFocus?.unfocus();          // 也可以使用如下方式隐藏键盘：          // SystemChannels.textInput.invokeMethod('TextInput.hide');        }      },    );  }  List<NavigatorObserver> buildObservers() {    return [MyNavigatorObserver()];  }  String? buildInitialRoute(      {required AppModel appModel, required UserModel userModel}) {    String? initialRoute;    // String? isAgree = localeModel.isAgree;    String? isAgree = "1";    if ("1" == isAgree) {      if (userModel.isLogin) {        initialRoute = RouterName.main;      } else {        initialRoute = RouterName.login;      }    } else {      initialRoute = RouterName.agreement;    }    return initialRoute;  }}

之后我们可以在具体使用的地方这个配置的home。

return Scaffold(      appBar: MyAppBar(        label: S.of(context).home,        isBackButton: false,      ),body:Container(),);

更换语言环境页面

class LanguagePage extends StatefulWidget {  const LanguagePage({Key? key, this.arguments}) : super(key: key);  final Object? arguments;  @override  State<LanguagePage> createState() => _LanguagePageState();}class _LanguagePageState extends State<LanguagePage> {  @override  Widget build(BuildContext context) {    var color = Theme.of(context).primaryColor;    var localeModel = Provider.of<LocaleModel>(context);    Widget _buildLanguageItem(String lan, value) {      LoggerManager().debug("_buildLanguageItem：${lan}, value:${value}");      return SettingCheckItemWidget(        title: lan,        content: "",        checkColor: color,        isSelected: localeModel.locale == value,        onPressed: () {          // 此行代码会通知MaterialApp重新build          localeModel.locale = value;        },      );    }    return Scaffold(      appBar: MyAppBar(        onPressed: () {          navigatorBack();        },        label: S.of(context).language,        isBackButton: true,      ),      body: ListView.builder(        padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 10.0),        addRepaintBoundaries: false,        addAutomaticKeepAlives: false,        itemCount: 3,        itemBuilder: (context, index) {          if (index == 0) {            return _buildLanguageItem("中文简体", "zh_CN");          }          if (index == 1) {            return _buildLanguageItem("English", "en_US");          }          if (index == 2) {            return _buildLanguageItem(S.of(context).autoBySystem, null);          }          return Container();        },      ),    );  }  void userEnterApp() {    // 点击进入app    NavigatorPageRouter.pushReplacementNamed(RouterName.main);  }  void navigatorBack() {    NavigatorPageRouter.pop();  }}