MST
星途 面试题库

面试题:Flutter Cupertino风格应用中如何处理国际化

在开发一个支持多语言的Flutter Cupertino风格应用时,怎样结合官方的国际化方案,处理Cupertino组件中的文本和本地化相关的交互元素?请描述具体的实现步骤和关键代码点。
24.3万 热度难度
前端开发Flutter

知识考点

AI 面试

面试题答案

一键面试
  1. 实现步骤
    • 创建本地化资源文件
      • lib目录下创建l10n目录。
      • 创建不同语言的.arb文件,例如app_en.arb(英语)、app_zh.arb(中文)等。在.arb文件中定义应用中会用到的文本,如:
{
  "welcomeMessage": "Welcome",
  "@welcomeMessage": {
    "description": "The message shown to welcome the user"
  }
}
  • 配置国际化
    • pubspec.yaml文件中添加flutter_localizations依赖:
dependencies:
  flutter_localizations:
    sdk: flutter
 - 在`main.dart`的`MaterialApp`或`CupertinoApp`中配置`localizationsDelegates`、`supportedLocales`和`localeResolutionCallback`。例如:
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      localizationsDelegates: const [
        GlobalCupertinoLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en', ''),
        Locale('zh', ''),
      ],
      localeResolutionCallback: (deviceLocale, supportedLocales) {
        for (var locale in supportedLocales) {
          if (locale.languageCode == deviceLocale?.languageCode) {
            return deviceLocale;
          }
        }
        return supportedLocales.first;
      },
      home: HomePage(),
    );
  }
}
  • 提取和使用本地化字符串
    • 使用flutter gen-l10n命令生成本地化代码。这会在lib目录下生成l10n文件夹,里面包含自动生成的AppLocalizations类。
    • 在Cupertino组件中,通过AppLocalizations.of(context)获取本地化字符串。例如在CupertinoButton中:
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: CupertinoButton(
          onPressed: () {},
          child: Text(AppLocalizations.of(context)!.welcomeMessage),
        ),
      ),
    );
  }
}
  1. 关键代码点
    • .arb文件的正确编写:注意每个字符串都应该有对应的描述,方便翻译人员理解含义。并且字符串的命名要清晰,符合应用内的语义。
    • localizationsDelegates配置:要包含GlobalCupertinoLocalizations.delegate,因为它负责Cupertino组件的本地化。同时也要包含GlobalMaterialLocalizations.delegateGlobalWidgetsLocalizations.delegate,以确保整个应用的本地化支持。
    • flutter gen - l10n命令:正确执行该命令以生成有效的本地化代码,该代码为在应用中方便地获取本地化字符串提供了基础。
    • AppLocalizations.of(context)的使用:在需要显示本地化文本的Cupertino组件中,正确使用该方法获取本地化字符串,确保文本根据用户当前设置的语言显示正确内容。