Flutter:多语言应用程序-如何覆盖区域设置?

ql3eal8s  于 2023-03-13  发布在  Flutter
关注(0)|答案(5)|浏览(165)

我按照官方Flutter页面中的说明(请参见here)来使我的应用程序可以在不同的语言中工作。
根据文档,它可以检索用户的语言环境,并且可以正常工作。
现在假设我的应用程序支持不同的语言(例如EN、FR、ES ...),并且用户可以选择这些语言中的一种来使用该应用程序(所选语言将不同于在电话的设置中定义的语言),我如何实现这一点?
如何强制应用程序语言环境并动态“重新加载”所有翻译?
Flutter页面没有解释这一点,我也没有看到任何帮助我的文档...
以下是当前的实现:

class Translations {
  Translations(this.locale);

  final Locale locale;

  static Translations of(BuildContext context){
    return Localizations.of<Translations>(context, Translations);
  }

  static Map<String, Map<String, String>> _localizedValues = {
    'en': {
      'title': 'Hello',
    },
    'fr': {
      'title': 'Bonjour',
    },
    'es': {
      'title': 'Hola',
    }
  };

  String text(String key){
    return _localizedValues[locale.languageCode][key] ?? '** ${key} not found';
  }
}

class TranslationsDelegate extends LocalizationsDelegate<Translations> {
  const TranslationsDelegate();

  @override
  bool isSupported(Locale locale) => ['en', 'fr','es'].contains(locale.languageCode);

  @override
  Future<Translations> load(Locale locale) {
    return new SynchronousFuture<Translations>(new Translations(locale));
  }

  @override
  bool shouldReload(TranslationsDelegate old) => false;
}

大体上。dart:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: Translations.of(context).text('title'),
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      localizationsDelegates: [
        const TranslationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''), // English
        const Locale('fr', ''), // French
        const Locale('fr', ''), // French
      ],
        home: new LandingPage(),
    );
  }
}

非常感谢你的帮助。

w6lpcovy

w6lpcovy1#

这可以通过以下方式实现
1.创建一个新的LocalizationsDelegate,该LocalizationsDelegate可以转换为单个区域设置,也可以根据参数完全延迟
1.将基本应用程序(MyApp)转换为有状态小部件,并将上面的新委托插入localizationsDelegates列表
1.使用基于某个事件针对特定区域设置的新委托管理基本应用程序(MyApp)状态
1)的简单实现可以是:

class SpecifiedLocalizationDelegate
    extends LocalizationsDelegate<Translations> {
  final Locale overriddenLocale;

  const SpecifiedLocalizationDelegate(this.overriddenLocale);

  @override
  bool isSupported(Locale locale) => overriddenLocale != null;

  @override
  Future<Translations> load(Locale locale) =>
      Translations.load(overriddenLocale);

  @override
  bool shouldReload(SpecifiedLocalizationDelegate old) => true;
}

对于2)和3),接下来将MyApp转换为有状态的,并包含新的委托(最初只是延迟所有内容),加上一些事件处理程序,以便使用指定新Locale的新委托来更改状态。

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  SpecifiedLocalizationDelegate _localeOverrideDelegate;

  @override
  void initState() {
    super.initState();
    _localeOverrideDelegate = new SpecifiedLocalizationDelegate(null);
  }

  onLocaleChange(Locale l) {
    setState(() {
      _localeOverrideDelegate = new SpecifiedLocalizationDelegate(l);
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      localizationsDelegates: [
        _localeOverrideDelegate,
        const TranslationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', ''), // English
        const Locale('fr', ''), // French
      ],
      home: new LandingPage(onLocaleSwitch: onLocaleChange),
    );
  }
}

有了这些更改,现在可以在子部件中使用Translations.of(context).myLocalizedString来检索翻译。
更完整的要点:https://gist.github.com/ilikerobots/474b414138f3f99150dbb3d0cc4cc721

ccgok5k5

ccgok5k52#

要控制应用程序的区域设置,可以使用MaterialApp的locale属性:

return MaterialApp(
  ...
  locale: _myLocal,
  ...
);

这与@ilikerobots StatefulWidget方法相结合,将为您提供您所需要的。

roejwanj

roejwanj3#

使用其中一个提供程序应该可以完成这项工作,我不是很熟悉提供程序,但这让我很容易工作
1.使用ChangeNotifierProvider Package 您的材料应用程序

return ChangeNotifierProvider(
        create: (_) => new LocaleModel(),
        child: Consumer<LocaleModel>(
            builder: (context, provider, child) => MaterialApp(
                title: 'myapp',
                locale: Provider.of<LocaleModel>(context).locale
                 ...
                 ...
                 ...

1.创建一个带有getter和setter的模型类来获取和设置语言环境为\

import 'package:iborganic/const/page_exports.dart';

class LocaleModel with ChangeNotifier {
  Locale locale = Locale('en');
  Locale get getlocale => locale;
  void changelocale(Locale l) {
    locale = l;
    notifyListeners();
  }
}

1.**更改某些事件的区域设置(单击按钮)**为

Provider.of<LocaleModel>(context).changelocale(Locale("kn"));

将材质应用程序 Package 在Provider中的好处是,您可以从应用程序的任何部分访问区域设置值

fjaof16o

fjaof16o4#

最简单的方法是使用locale属性,而国际化教程中并没有提到这一点,MaterialApp类的这个属性允许我们立即指定应用程序要使用的locale

return MaterialApp(
  locale: Locale('ar', ''),
  localizationsDelegates: [
    MyLocalizationsDelegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en', ''), // English
    const Locale('ar', ''), // Arabic
  ],
  home: HomeScreen()
);

This tutorial explained it better
它还解释了如何从sharedPreferences加载语言环境首选项

byqmnocz

byqmnocz5#

Material App上使用locale参数覆盖应用程序默认值。如果“locale”为null,则使用系统的locale值。但请确保您传递的是可识别的Locale,Locale.fromSubtags适用于我:

return MaterialApp(
   locale: Locale.fromSubtags(languageCode: 'es'),
   localizationsDelegates: [
     ...
 );

如果您想在以后更改此值,请使用Provider并将Material App Package 为Consumer以监视更改。

相关问题