Qt 編寫應用支援多語言版本--一個GUI應用示例

林特斯9527發表於2019-06-13

QTGUI

簡介

上一篇博文已經說過如何編寫支援多語言的Qt 命令列應用，這一篇說說Qt GUI 應用多語言支援的坑。

本人喜歡用程式碼來寫佈局，而不是用 Qt Designer 來設計佈局，手寫佈局比 Qt Desiner 佈局有以下優點：

手工佈局，所想即所見，
原始碼方式修改佈局非常方便，只需要拷貝程式碼、註釋程式碼就行，如果用 Qt Designer 修改原有佈局，簡直要人老命，拖放一下 widget 就會打亂了原有的 layout；

本文示例程式是一個GUI應用，手寫佈局，在工具欄中新增兩個 QAction，可以切換中文、英文介面，主介面一個標籤顯示文字，一個按鈕用來退出應用。

英文介面如下：

Qt 編寫應用支援多語言版本--一個GUI應用示例

中文介面如下：

Qt 編寫應用支援多語言版本--一個GUI應用示例

開發環境及步驟

VS 版本： vs2017 社群版
Qt 版本： 5.11.1
Qt VS tools: 2.3.2

第一步新建 HelloQt 工程

預設的會建立 UI 檔案，直接編譯工程，複製編譯產生的 ui_HelloQt.h 檔案，重新命名為 myUI_HelloQt.h 以這個檔案為模板，手工佈局。

第二步在 `setupUI()` 中實現佈局

使用MVC程式設計模型，只在 myUI_HelloQt.h 檔案中實現GUI，這裡雖然新建了兩個 QAction 和一個 QPushButton ，但是沒有連線訊號和槽函式。

佈局完成除錯看看是否佈局合理。

第三步翻譯並新增到資源

新建翻譯檔案 helloqt_zh.ts；
用工具 lupdate 提取字串，並語言家來翻譯；
用工具 lrelease 釋出 QM 檔案，即 helloqt_zh.qm 檔案；
在資原始檔 HelloQt.qrc 中新增 QM 檔案，並把資源重新命名為 :/translations/helloqt_zh
如圖所示：

上面的步驟只是準備了翻譯字串，實際上應用程式並不能切換語言，還需要執行下面的步驟：
新建一個成員變數 QTranslator *language_zh;，並在主視窗的構造方法中載入對應的QM檔案， language_zh->load(":/translations/helloqt_zh");

載入了 QM 檔案還不能切換多語言，需要安裝才行。到底何時安裝呢？這時候想起了前面的兩個 QAction，只有點選了對應的工具條才切換對應的語言，在主視窗的構造方法中連線訊號和槽函式:

        // signals and slots
    QObject::connect(ui.act_language_zh, SIGNAL(triggered(bool)), this, SLOT(on_trigger_language_zh(bool)));
        QObject::connect(ui.act_language_en, SIGNAL(triggered(bool)), this, SLOT(on_trigger_language_en(bool)));
        QObject::connect(ui.btn_quit, SIGNAL(clicked(bool)), this, SLOT(on_btn_quit_clicked(bool)));

分別實現 action 對應的槽函式，載入中文時安裝 QTranslation，載入英文時解除安裝，如下面的程式碼所示：

void HelloQt::on_trigger_language_zh(bool checked)
{
    qDebug() << tr("Chinese") << endl;
    qApp->installTranslator(language_zh);
}

void HelloQt::on_trigger_language_en(bool checked)
{
    qDebug() << tr("English") << endl;
    qApp->removeTranslator(language_zh);
}

執行完上一步你就急著編譯檢視結果，點選兩個工具欄你卻發現並不能切換語言，為什麼呢？因為切換語言的事件還沒有處理呢。覆蓋 changeEvent() 即可：
```
void HelloQt::changeEvent(QEvent *event)
{
    if (event->type() == QEvent::LanguageChange) {
        ui.retranslateUi(this);
        } else {
        QMainWindow::changeEvent(event);
    }
}
```

至此兩個工具欄終於可以正常地切換語言顯示了。

深入一點

你可以看到工程中至少出現了3次 retranslateUi() 函式，一次是定義，兩次是呼叫，第一次呼叫是在UI 初始化中，第二次呼叫是 changeEvent() 中切換語言，它所做的工作就是把UI widgets 上顯示的字串替換為特定語言的字串。例如給主視窗設定視窗標題 HelloQtClass->setWindowTitle(QApplication::translate("HelloQtClass", "HelloQt", nullptr)); 最關鍵的是裡面的 [static] QString QCoreApplication::translate(const char *context, const char *sourceText, const char *disambiguation = nullptr, int n = -1)，這個函式才是負責翻譯語言的。

第一個引數 context 理解為上下文，什麼是上下文，Qt 助手說它就是一個類名。不同的字串會分配到不同的上下文。分配規則是 tr() 是用哪個類名來限定的，如下面的程式碼，分別呼叫 QObject::tr("install Chinese")，HelloQt::tr("install English") 那麼就有兩個上下文，分別是 QObject 和 HelloQt，這一點也可以從語言家看到。

void HelloQt::on_trigger_language_zh(bool checked)
{
    qDebug() << QObject::tr("install Chinese") << endl;
    qApp->installTranslator(language_zh);
}

void HelloQt::on_trigger_language_en(bool checked)
{
    qDebug() << HelloQt::tr("install English") << endl;
    qApp->removeTranslator(language_zh);
}

語言家介面的顯示：

Qt 編寫應用支援多語言版本--一個GUI應用示例

第二個引數 sourceText 就是原始碼中以 tr() 括起來的字串。

後面的兩個引數暫時沒有用到，忽略。

一張圖說明上下文，源字串二者的關係，如果程式碼中某個字串被刪除了但是 TS 檔案中還存在，而且今後不需要這個翻譯，就可以用記事本開啟 TS 檔案，直接刪除以 vanished 標記的翻譯：

Qt 編寫應用支援多語言版本--一個GUI應用示例

回到 retranslateUi() 函式，這是一個自定義的函式，使用者在這裡翻譯GUI介面，如果發現GUI上某個 widget 語言沒有變化，就需要在這裡翻譯，如下面的程式碼翻譯標籤和按鈕的文字，以及兩個工具欄的文字：

```C++
    // add your own translate here.
    act_language_zh->setText(QApplication::translate("QObject", "Chinese", nullptr));
    act_language_en->setText(QApplication::translate("QObject", "English", nullptr));
    lbl_hello->setText(QApplication::translate("QObject", "<h2><i>Hello</i><font color=red>Qt!</font></h2>", nullptr));
    btn_quit->setText(QApplication::translate("QObject", "&Quit", nullptr));
```

上面的程式碼中標籤文字是一個 HTML 程式碼，這個也可以翻譯的， HTML 樣式保留，只需要替換裡面的 Hello 和 Qt! 即可。

原始碼

只列出關鍵的原始碼，首先是佈局檔案 myUI_HelloQt.h

#pragma once
#ifndef MYUI_HELLOQT_H
#define MYUI_HELLOQT_H

#include <QtCore/QVariant>
#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtWidgets/QMenuBar>
#include <QtWidgets/QStatusBar>
#include <QtWidgets/QToolBar>
#include <QtWidgets/QWidget>
#include <QtWidgets/QMenu>
#include <QtWidgets/QAction>
#include <QtWidgets/QLabel>
#include <QtWidgets/QPushButton>
#include <QtWidgets/QVBoxLayout>

QT_BEGIN_NAMESPACE

class Ui_HelloQtClass
{
public:
    QMenuBar *menuBar;
    QToolBar *mainToolBar;
    QWidget *centralWidget;
    QStatusBar *statusBar;
    QAction *act_language_zh;
    QAction *act_language_en;
    QLabel *lbl_hello;
    QPushButton *btn_quit;


    void setupUi(QMainWindow *HelloQtClass)
    {
        if (HelloQtClass->objectName().isEmpty())
            HelloQtClass->setObjectName(QStringLiteral("HelloQtClass"));
        //HelloQtClass->resize(600, 400);
        HelloQtClass->setFixedSize(400, 160);
        menuBar = new QMenuBar(HelloQtClass);
        menuBar->setObjectName(QStringLiteral("menuBar"));
        HelloQtClass->setMenuBar(menuBar);
        mainToolBar = new QToolBar(HelloQtClass);
        mainToolBar->setObjectName(QStringLiteral("mainToolBar"));
        HelloQtClass->addToolBar(mainToolBar);
        centralWidget = new QWidget(HelloQtClass);
        centralWidget->setObjectName(QStringLiteral("centralWidget"));

        // add actions here.
        act_language_zh = new QAction(QObject::tr("Chinese"), HelloQtClass);
        act_language_en = new QAction(QObject::tr("English"), HelloQtClass);
        mainToolBar->addAction(act_language_zh);
        mainToolBar->addAction(act_language_en);

        // add your widgets here.
        lbl_hello = new QLabel(HelloQtClass);
        lbl_hello->setText(QObject::tr("<h2><i>Hello</i><font color=red>Qt!</font></h2>"));
        lbl_hello->setAlignment(Qt::AlignHCenter);
        
        btn_quit = new QPushButton(QObject::tr("&Quit"), HelloQtClass);
                
        QVBoxLayout *vLayout = new QVBoxLayout;
        vLayout->addWidget(lbl_hello);
        vLayout->addWidget(btn_quit);
        centralWidget->setLayout(vLayout);

        HelloQtClass->setCentralWidget(centralWidget);
        statusBar = new QStatusBar(HelloQtClass);
        statusBar->setObjectName(QStringLiteral("statusBar"));
        HelloQtClass->setStatusBar(statusBar);

        retranslateUi(HelloQtClass);

        QMetaObject::connectSlotsByName(HelloQtClass);
    } // setupUi

    void retranslateUi(QMainWindow *HelloQtClass)
    {
        // NOTE: the first parameter `context` in translate() must match the `context` in Qt Linguist.
        // [static] QString QCoreApplication::translate(const char *context, const char *sourceText, const char *disambiguation = nullptr, int n = -1)
        HelloQtClass->setWindowTitle(QApplication::translate("HelloQtClass", "HelloQt", nullptr));

        // add your own translate here.
        act_language_zh->setText(QApplication::translate("QObject", "Chinese", nullptr));
        act_language_en->setText(QApplication::translate("QObject", "English", nullptr));
        lbl_hello->setText(QApplication::translate("QObject", "<h2><i>Hello</i><font color=red>Qt!</font></h2>", nullptr));
        btn_quit->setText(QApplication::translate("QObject", "&Quit", nullptr));
    } // retranslateUi

};

namespace Ui {
    class HelloQtClass : public Ui_HelloQtClass {};
} // namespace Ui

QT_END_NAMESPACE

#endif // MYUI_HELLOQT_H

然後是 HelloQt.h

#pragma once

#include <QtWidgets/QMainWindow>
#include <QTranslator>
#include "myUI_HelloQt.h"

class HelloQt : public QMainWindow
{
    Q_OBJECT

public:
    HelloQt(QWidget *parent = Q_NULLPTR);

public slots:
    void on_trigger_language_zh(bool checked);
    void on_trigger_language_en(bool checked);

protected slots:
    void on_btn_quit_clicked(bool clicked);
    

protected:
    void changeEvent(QEvent *event) override;

private:
    Ui::HelloQtClass ui;
    QTranslator *language_zh;
};

然後是 HelloQt.c

#include <QDebug>
#include "HelloQt.h"

HelloQt::HelloQt(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);
    
    // load translation
    language_zh = new QTranslator(this);
    language_zh->load(":/translations/helloqt_zh");

    // signals and slots
    QObject::connect(ui.act_language_zh, SIGNAL(triggered(bool)), this, SLOT(on_trigger_language_zh(bool)));
    QObject::connect(ui.act_language_en, SIGNAL(triggered(bool)), this, SLOT(on_trigger_language_en(bool)));
    QObject::connect(ui.btn_quit, SIGNAL(clicked(bool)), this, SLOT(on_btn_quit_clicked(bool)));
}

void HelloQt::on_trigger_language_zh(bool checked)
{
    qDebug() << QObject::tr("install Chinese") << endl;
    qApp->installTranslator(language_zh);
}

void HelloQt::on_trigger_language_en(bool checked)
{
    qDebug() << HelloQt::tr("install English") << endl;
    qApp->removeTranslator(language_zh);
}

void HelloQt::on_btn_quit_clicked(bool clicked)
{
    qApp->quit();
}

//************************************
// Method:    changeEvent
// FullName:  HelloQt::changeEvent
// Access:    protected 
// Returns:   void
// Qualifier:
// Parameter: QEvent * event
// Description: change language.
//************************************
void HelloQt::changeEvent(QEvent *event)
{
    if (event->type() == QEvent::LanguageChange) {
        ui.retranslateUi(this);
    } else {
        QMainWindow::changeEvent(event);
    }
}

然後是翻譯檔案 helloqt_zh.ts

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE TS>
<TS version="2.1" language="zh_CN">
<context>
    <name>HelloQt</name>
    <message>
        <location filename="HelloQt.cpp" line="27"/>
        <source>install English</source>
        <oldsource>English</oldsource>
        <translation>安裝英文</translation>
    </message>
</context>
<context>
    <name>HelloQtClass</name>
    <message>
        <location filename="myUI_HelloQt.h" line="80"/>
        <source>HelloQt</source>
        <translation>你好Qt</translation>
    </message>
</context>
<context>
    <name>QObject</name>
    <message>
        <location filename="myUI_HelloQt.h" line="49"/>
        <location filename="myUI_HelloQt.h" line="83"/>
        <source>Chinese</source>
        <translation>中文</translation>
    </message>
    <message>
        <location filename="myUI_HelloQt.h" line="50"/>
        <location filename="myUI_HelloQt.h" line="84"/>
        <source>English</source>
        <translation>英文</translation>
    </message>
    <message>
        <location filename="myUI_HelloQt.h" line="56"/>
        <location filename="myUI_HelloQt.h" line="85"/>
        <source>&lt;h2&gt;&lt;i&gt;Hello&lt;/i&gt;&lt;font color=red&gt;Qt!&lt;/font&gt;&lt;/h2&gt;</source>
        <translation>&lt;h2&gt;&lt;i&gt;你好&lt;/i&gt;&lt;font color=red&gt;Qt!&lt;/font&gt;&lt;/h2&gt;</translation>
    </message>
    <message>
        <location filename="myUI_HelloQt.h" line="59"/>
        <location filename="myUI_HelloQt.h" line="86"/>
        <source>&amp;Quit</source>
        <translation>&amp;退出</translation>
    </message>
    <message>
        <location filename="HelloQt.cpp" line="21"/>
        <source>install Chinese</source>
        <translation>安裝中文</translation>
    </message>
</context>
</TS>

然後是資原始檔 HelloQt.qrc

<RCC>
    <qresource prefix="/translations">
        <file alias="helloqt_zh">helloqt_zh.qm</file>
    </qresource>
</RCC>

宣告

歡迎轉載，請註明出處和作者，同時保留宣告。
作者：LinTeX9527
出處：https://www.cnblogs.com/LinTeX9527/p/11015060.html
本部落格的文章如無特殊說明，均為原創，轉載請註明出處。如未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。

Qt 多語言支援
2019-06-07
QT
使用Golang語言編寫Hello World Web應用
2019-04-20
GolangWeb
使用 Swift 語言編寫 Android 應用入門
2016-04-20
SwiftAndroid
30分鐘編寫一個Flask應用
2015-02-20
Flask
編寫第一個HADOOP應用程式
2011-01-26
Hadoop
開始你的第一個多語言版本的dotNET 應用程式(WinForm篇) (轉)
2007-12-09
ORM
用 PHP 寫一個"程式語言"
2018-12-21
PHP
Flutter學習指南：編寫第一個應用
2019-03-04
Flutter
編寫多執行緒應用程式，模擬多個人通過一個山洞：
2017-09-18
執行緒
golang語言SAAS下多應用模式框架
2022-11-28
Golang模式框架
Qt——應用程式打包（一）
2017-02-23
QT
用 golang 寫一個語言（編譯器，虛擬機器）
2020-05-08
Golang編譯虛擬機
用 C 語言編寫一個簡單的垃圾回收器
2014-09-23
Flutter學習指南：編寫第一個Flutter應用
2018-11-12
Flutter
Flutter入坑指南：編寫第一個Flutter應用
2018-11-12
Flutter
Xamarin iOS編寫第一個應用程式建立工程
2015-01-22
iOS
ModernUI教程：第一個ModernUI應用(手動編寫)
2014-12-01
UI
一個簡單的 indexedDB 應用示例
2024-04-09
Index
Go 編寫 Web 應用
2019-04-03
GoWeb
用PHP編寫Android應用程式
2019-05-11
PHPAndroid
用 C 語言編寫多程式 Web 伺服器【粗暴版】
2019-08-30
Web伺服器
iOS應用程式多語言&本地化解決方案
2017-01-02
iOS
用nodejs寫一個命令列應用-前言
2018-07-20
NodeJS命令列
用wxPython開發GUI第一個示例講解
2013-01-09
PythonGUI
【保姆級教程】如何用Rust編寫一個ChatGPT桌面應用
2023-05-15
RustChatGPT
Qt 5.3.1 版本應用程式的釋出問題
2014-09-26
QT
用QT寫一個搜尋引擎思路
2016-07-20
QT
開源專案：採用 Laravel 編寫的一個聊天應用 Laravel-Chat
2018-10-08
Laravel
[譯] 用 Flutter 寫一個待辦事項應用
2018-07-18
Flutter
用C語言編寫windows服務程式
2013-08-05
C語言Windows
使用flutter編寫一款視訊應用
2020-12-29
Flutter
編寫第一個Qt程式
2020-12-09
QT
SAP UI5 標準應用的多語言支援 - SAP UI5 執行時語言判定機制
2021-04-28
UI
iOS 11開發教程（二）編寫第一個iOS 11應用
2017-10-16
iOS
編寫高效的MySQL應用(轉)
2007-08-11
MySql
編寫安全PHP應用程式的七個習慣
2015-04-13
PHP
Go語言反射（reflect）及應用
2020-11-03
Go反射
C/C++ Qt MdiArea 多窗體元件應用
2021-11-30
C++QT元件

Qt 編寫應用支援多語言版本--一個GUI應用示例

簡介

開發環境及步驟

第一步 新建 HelloQt 工程

第二步 在 setupUI() 中實現佈局

第三步 翻譯並新增到資源

深入一點

原始碼

宣告

相關文章

第一步新建 HelloQt 工程

第二步在 `setupUI()` 中實現佈局

第三步翻譯並新增到資源