qml 国际化2

柔情只为你懂 2022-08-06 07:10 141阅读 0赞

Internationalization and Localization with Qt Quick

程序国际化

1) Use qsTr() for all Literial UI strings

qsTr(), qsTranslate(), qsTrId(), QT\_TR\_NOOP(), QT\_TRANSLATE\_NOOP(), and QT\_TRID\_NOOP() functions

最普遍的方式是:

>这段code会在translation文件中为string创建一个key entry; 运行时刻根据系统的locale, translation系统会寻找关键字"Back"然后拿到相应的翻译值; 拿到的值设给text的property, 这样UI可以显示出对"Black"相应的翻译;

2) Add Context for the Translate

UI string通常很短, 我们需要帮助翻译人员理解文字的内容; 可以在源代码中添加context information作为额外的描述文字, 放在将被翻译的string前面. 这些文字会被引入到.ts文件中, 展示给翻译人员;

Note: .ts文件是XML格式, 内容是源文字和翻译文字的占位符. 被updated的.ts文件会被转换成二进制的翻译文件并且作为程序的部分被引入到工程中;

//: 给翻译器的主要注释; //~ 可选的额外信息; 第一个word会被用作XML element中的元素id;

3) Disambiguate Identical Texts

translation系统会将UI中重复的text string统一成唯一的item; 统一化节省了翻译人员的重复工作量; 但是在某些情况下text一样但是解释不同; e.g. 英语里的"back"可以表示往后, 也可以表示物体的背面. 我们需要告诉translation系统这两个是不同的意思, 翻译器就可以创建2个分开的translations;在qsTr()中添加id text作为第二个参数用来区分相同的text;

4) Use % x to Insert Parameters into a String

使用%在strings里插入参数, 比起直接将文字句子直接放入string更清晰;

5) Use %Lx so Numbers are localized

当指定一个参数时, 如果使用了%L modifier, 数字会根据当前的区域设置本地化; e.g. %L1表示根据当前选择的locale的数字格式转化方式来格式化第一个参数;

6) Internationalize Dates Times and Currencies

没有特定的in-string modifiers来格式化dates, times; 我们需要查询当前locale然后使用Date的方法来format;Qt.locale() 返回Locale 对象, 包含所有的locale信息; Locale.name property包含了当前的语言和国家信息;

7) Use QT\_TR\_NOOP() for Translatable Data Text Strings

如果用户改变了系统的语言, 但没有重启; 在arrays和list model和其他数据结构里的strings可能无法自动刷新; 为了强制刷新UI上显示的文字, 我们需要将strings声明QT\_TR\_NOOP()宏; 这样当显示对象的时候, 会显式地对每个文字寻取翻译;

8) Use Locale to Extend Localization Features

使用Qt.locale()取得当前locale, 选择相应的图像或声音来做到程序本地化;

<table style="max-width:100%; border-collapse:collapse; border-spacing:0px; font-size:16px; line-height:28.799999237060547px; color:rgb(51,51,51); font-family:'Helvetica Neue',Helvetica,Tahoma,Arial,STXihei,'Microsoft YaHei',微软雅黑,sans-serif"> 
 <tbody> 
  <tr style="line-height:1.8em"> 
   <td style="font-size:16px; line-height:1.8em"> 
    <div style="line-height:1.8em">
      1 
    </div> 
    <div style="line-height:1.8em">
      2 
    </div> 
    <div style="line-height:1.8em">
      3 
    </div> 
    <div style="line-height:1.8em">
      4 
    </div> 
    <div style="line-height:1.8em">
      5 
    </div> 
    <div style="line-height:1.8em">
      6 
    </div> 
    <div style="line-height:1.8em">
      7 
    </div> 
    <div style="line-height:1.8em">
      8 
    </div> 
    <div style="line-height:1.8em">
      9 
    </div> 
    <div style="line-height:1.8em">
      10 
    </div> 
    <div style="line-height:1.8em">
      11 
    </div> 
    <div style="line-height:1.8em">
      12 
    </div> </td> 
   <td style="font-size:16px; line-height:1.8em"> 
    <div style="line-height:1.8em"> 
     <div style="line-height:1.8em"> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">Component.onCompleted: { </code> 
     </div> 
     <div style="line-height:1.8em"> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">switch</code>&nbsp;&nbsp;&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">(Qt.locale().name.substring(0,2)) { </code> 
     </div> 
     <div style="line-height:1.8em"> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">case</code>&nbsp;&nbsp;&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">"en"</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">:&nbsp;&nbsp;&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">// show the English-language icon</code> 
     </div> 
     <div style="line-height:1.8em"> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">languageIcon =&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">"../images/language-icon_en.png"</code> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">;</code> 
     </div> 
     <div style="line-height:1.8em"> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">break</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">;</code> 
     </div> 
     <div style="line-height:1.8em"> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">case</code>&nbsp;&nbsp;&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">"fi"</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">:&nbsp;&nbsp;&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">// show the Finnish language icon</code> 
     </div> 
     <div style="line-height:1.8em"> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">languageIcon =&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">"../images/language-icon_fi.png"</code> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">;</code> 
     </div> 
     <div style="line-height:1.8em"> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">break</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">;</code> 
     </div> 
     <div style="line-height:1.8em"> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">default</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">// show a default language icon</code> 
     </div> 
     <div style="line-height:1.8em"> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">languageIcon =&nbsp;</code> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">"../images/language-icon_default.png"</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">;</code> 
     </div> 
     <div style="line-height:1.8em"> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">}</code> 
     </div> 
     <div style="line-height:1.8em"> 
      <code style="padding:2px 4px; font-family:Monaco,Menlo,Consolas,'Courier New',monospace; color:rgb(221,17,68); background-color:rgb(247,247,249); border:1px solid rgb(225,225,232); white-space:nowrap">}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

Qt Quick程序的localization系统和Qt C++程序一样(lupdate, lrelease, .ts files). C++和QML的UI stings可以放在同一个程序中; 系统会创建一个整合的translation文件, strings在QML和C++中可以找到;

Use a Conditiobal to Hide QML Source From the Compiler

lupdate工具会将UI strings从程序中解析出来; lupdate会读取.pro文件, 找到包含需要翻译的text的源文件;  Note 文件必须被列在.pro文件中的SORUCE或HEADERS路径中, 否则text无法被找到;

SOURCES变量是为了C++source文件而设定的, 如果我们把QML或JavaScript文件放进去, 编译器会把这些文件当作C++文件来编译; 解决办法是使用 lupdate\_only\{...\}条件语句; 这样lupdate能看到.qml文件但C++编译器会忽略;

可以使用通配符来查找, 由于不会递归查找, 我们需要设定每一个有UI string的目录;

Qt Linguist Manual: Release Manager

Tools: lupdate, lrelease

Qt Project Files

最简单的方法是在.pro文件中定义TRANSLATIONS块, 为每一个语言的增加一个文件;

使用文件名加上locale的方式对运行时判断语言种类有帮助(也可以用Folder来判断),

QTextCodec::setCodecForTr()可以选择8位encoding的方式显示tr()函数返回的String; 如果没有设置encoding, tr()会使用Latin1;

使用QTextCodec::setCodecForTr()机制需要在.pro文件中设置CODECFORTR.  如果编译器在运行时使用的是不同的encoding, 也需要设置CODECFORTR.  (MS VS2005.Net必须设置)