Flutter国际化

作者: itfitness | 来源:发表于2022-03-18 09:14 被阅读0次

    目录

    效果演示

    实现步骤

    1.添加Flutter Intl插件
    2.初始化项目

    在Android Studio中点击Tools->Flutter Intl->Initialize for the Project



    会生成如下这些文件


    3.添加语言

    在Android Studio中点击Tools->Flutter Intl->Add Locale



    添加完之后会生成新添加的文件


    4.增加多语言字段

    在上面生成的文件中增加字段即可,这里我只加了英语和中文
    intl_en.arb

    {
      "hello": "hello",
      "confirm": "confirm",
      "cancel": "cancel"
    }
    

    intl_zh.arb

    {
      "hello": "你好",
      "confirm": "确认",
      "cancel": "取消"
    }
    
    5.增加配置

    main.dart中增加如下配置

    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 MaterialApp(
          // =============增加的===============
          supportedLocales: S.delegate.supportedLocales,
          localizationsDelegates: const [
            // ... app-specific localization delegate[s] here
            S.delegate,
            GlobalMaterialLocalizations.delegate,
            GlobalCupertinoLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate
          ],
        // =============增加的===============
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    6.增加切换语言页面
    class MyHomePage extends StatefulWidget {
      const MyHomePage({Key? key, required this.title}) : super(key: key);
      final String title;
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;
    
      void _incrementCounter() {
        setState(() {
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: ListView.builder(
                itemCount: 3,
                itemExtent: 50,
                itemBuilder: (BuildContext context, int index){
                  if(index == 1){
                    return GestureDetector(
                      onTap: (){
                        S.load(Locale.fromSubtags(languageCode: 'zh'));
                        setState(() {
    
                        });
                      },
                      child: ListTile(title: Text("中文")),
                    );
                  }else if(index == 2){
                    return GestureDetector(
                      onTap: (){
                        S.load(Locale.fromSubtags(languageCode: 'en'));
                        setState(() {
    
                        });
                      },
                      child: ListTile(title: Text("英语")),
                    );
                  }
                  return ListTile(title: Text(S.of(context).hello));
                }
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: (){
              _incrementCounter();
            },
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      }
    }
    

    这里切换语言的关键代码如下:

    S.load(Locale.fromSubtags(languageCode: 'en'));
    //切换完更新下状态
    setState(() {
    
    });
    

    案例源码

    https://gitee.com/itfitness/flutter-multilingual

    相关文章

      网友评论

        本文标题:Flutter国际化

        本文链接:https://www.haomeiwen.com/subject/snovdrtx.html