使用 CLion 開發 Qt5

Build with CLion 2021.1 11.0.10 & Qt 5.15.2 & MSVC 2019 v142

TL;DR

1. 安裝 CLion。
2. 安裝 MSVC 2019 v142 。
3. 安裝 Qt (with MSVC2019 x64)。
4. 設定 CLion 環境。
5. 建立 Qt Widgets Executable 專案。
6. 微調 CMakeLists.txt
7. 透過 New > Qt UI Class 建立 Qt UI 檔。
8. 使用 Qt Designer 編輯 UI。
9. 完成編輯 Qt UI 檔後，重新編譯專案，CMake 會自動呼叫 UIC 建立 UI 的標頭檔。

安裝

安裝 CLion

CLion 可以免費使用 30 天，如果學校有提供 E-mail 的話，可以到 JetBrains 官網啟用教育版授權，便可以免費使用一年（如果 E-mail 沒有被註銷，授權到期後可以重複啟用）。

安裝 MSVC 2019 v142

安裝 Visual Studio 的時候，選擇安裝『使用 c + + 的桌面開發』，其中就包含了 MSVC 元件，亦可自己到『個別元件』分頁單獨選擇要安裝的 MSVC 元件。

安裝 Qt

安裝 Qt 時，需要將 MSVC 2019 64-bit 選項打勾，安裝 MSVC 需要的元件。

設定編譯環境

設定編譯器

安裝完所有程式後，開啟 CLion，到 Settings > Build, Execution, Deployment > Toolchains 設定編譯工具。

設定位於 Visual Studio 裡的 MSVC 編譯器的位置

將 Architecture 設定成 amd64，這樣才會自動抓到 64 位元的編譯器。

選擇編譯版本

預設專案已經包含編譯 Debug 版本的設定，如果要編譯 Release 版本，可至 Settings > Build, Execution, Deployment > CMake 新增 Release 版本。

在 Profiles 裡面按一下加號，就會自動產生 Release Profile

接著只要在 CLion 視窗右上方切換 Profile 就可以編譯 Release 版本了。

選擇 Release Profile 並編譯專案

建立 Qt Widgets Executable 專案

建立專案時，選擇 Qt Widgets Executable，並且將 Qt CMake prefix path 填入位於 Qt 資料夾下的 MSVC 資料夾。

建立 Qt Widgets Executable 專案

專案建立完成後，可以先執行看看範例程式是否能成功執行。

預設範例程式，內含一個按鈕

微調 CMakeLists.txt

取消顯示命令提示字元

用預設的 CMakeLists.txt 編譯程式後所產生的執行檔，透過手動點兩下執行時，除了顯示 Qt UI 的界面以外，還會另外跳出一個命令提示字元視窗，這是因為編譯出來的程式沒有指定 WIN32 的緣故，因此需手動修改。

在 CMakeLists.txt 裡找到 add_executable 命令並加入 WIN32：

add_executable(${PROJECT_NAME} WIN32 main.cpp mainwindow.cpp  mainwindow.h mainwindow.ui)

Qt UI 顯示樣式老舊

當程式執行時，界面是傳統 Windows 樣式的話，表示缺少 qwindowsvistastyle.dll，該檔案可以在 C:\Qt\5.15.2\msvc2019_64\plugins\styles 底下找到，可自行複製到與執行檔同目錄下的 plugins/styles 底下，或修改 CMakeLists.txt，使程式編譯完成後，自動複製到該目錄下。

在 CMakeLists.txt 加入以下程式：

判斷 qwindowsvistastyle.dll 是否存在，並將其複製至指定位置。

if (EXISTS  "${QT_INSTALL_PATH}/plugins/styles/qwindowsvistastyle${DEBUG_SUFFIX}.dll")
    add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
            COMMAND ${CMAKE_COMMAND} -E make_directory
            "$<TARGET_FILE_DIR:${PROJECT_NAME}>/plugins/styles/")
    add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD
            COMMAND ${CMAKE_COMMAND} -E copy
            "${QT_INSTALL_PATH}/plugins/styles/qwindowsvistastyle${DEBUG_SUFFIX}.dll"
            "$<TARGET_FILE_DIR:${PROJECT_NAME}>/plugins/styles/")
endif ()

套用 Windows Vista Style 後，滑鼠遊標停留在按鈕上時，應該要有視覺回饋。

最終的 CMakeLists.txt

add_executable: Line 14
複製 qwindowsvistastyle.dll: Line 52 ~ 60

CMakeLists.txt for Qt UI ($2111766) · Snippets · Snippets

建立 & 編輯 UI

建立 UI 檔案

在專案上面點右鍵，並依序選擇 New > Qt UI Class，輸入名稱後，需將 Parent class 設定為 QMainWindow。

Parent class 需設為 QMainWindow

建立 UI 檔後，先在名為 MainWindow 的 Widget 裡面新增一個空的 Widget，並設定 Class 為 QWidget，這樣才能在 Qt Designer 裡面新增其他元件。

<widget class="QMainWindow" name="MainWindow">
    <!-- 略 -->
    <widget class="QWidget"></widget>
</widget>

編輯 UI

使用 Qt Designer 開啟 UI 檔，即可編輯界面，接著存檔後，重新編譯程式就會產生新的 UI 標頭檔。

Qt Designer 位於 C:\Qt\5.15.2\msvc2019_64\bin\designer.exe

透過設定 External Tools 可以用更方便的方式開啟 Qt Designer：

首先至 Settings > External Tools，點選加號新增外部工具，在 Program 填入 Qt Designer 的執行檔位置， Arguments 填入 $FileName$，Working directory 填入 $FileDir$，並按下 OK 即可。

新增 External Tools

接著只要對 UI 檔按右鍵，並選擇 External Tools > Qt Designer，就可以用 Qt Designer 開啟該檔案。

External Tools > Qt Designer

顯示 UI

在編輯完 UI 後，將程式重新編譯，使其產生 UI 的標頭檔 (*.h)後，接著修改 main 方法，讓界面顯示出來：

int main(int argc, char *argv[]) {
    QApplication a(argc, argv);
    MainWindow m;
    m.show();
    return QApplication::exec();
}

啟用 UI 縮放

如果系統顯示有設定縮放的話，可能會造成 Qt Designer 拉出來的界面跟實際執行的界面比例不同，這時候在環境變數新增 QT_AUTO_SCREEN_SCALE_FACTOR = 1 就能解決。

在 main 方法的第一行新增以下程式即可：

qputenv("QT_AUTO_SCREEN_SCALE_FACTOR", "1");

Include OpenCV

Install OpenCV & Add the following code in CMakeLists.txt

set(OPENCV_INCLUDE_DIRS "C:/opencv/build/include")
set(OPENCV_LIB "C:/opencv/build/x64/vc15/lib/opencv_world3410${DEBUG_SUFFIX}.lib")

include_directories(${OPENCV_INCLUDE_DIRS})
target_link_libraries(${PROJECT_NAME} ${OPENCV_LIB})

完