代碼UI化設(shè)計(jì)（QT）

實(shí)例功能概述

假設(shè)我們要?jiǎng)?chuàng)建一個(gè)簡單的計(jì)算器應(yīng)用程序。該應(yīng)用程序具有以下功能：

• 包含數(shù)字按鈕（0-9）、操作符按鈕（+、-、*、/）、等于按鈕（=）和清除按鈕（C）。
• 有一個(gè)顯示計(jì)算結(jié)果和輸入表達(dá)式的文本框。
• 用戶可以通過點(diǎn)擊按鈕輸入數(shù)字和操作符，并進(jìn)行簡單的四則運(yùn)算，點(diǎn)擊等于按鈕得出結(jié)果，點(diǎn)擊清除按鈕清除輸入和結(jié)果。

實(shí)例功能實(shí)現(xiàn)

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QLabel>
#include <QPushButton>
#include <QGridLayout>
#include <QString>class MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private slots:void onNumberButtonClicked();void onOperatorButtonClicked();void onEqualButtonClicked();void onClearButtonClicked();private:QLabel *displayLabel;QString expression;QPushButton *createButton(const QString &text, const char *member);QGridLayout *gridLayout;
};#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include <QVBoxLayout>
#include <QPushButton>
#include <QString>
#include <iostream>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), expression("")
{// 創(chuàng)建顯示標(biāo)簽displayLabel = new QLabel("0", this);displayLabel->setAlignment(Qt::AlignRight);displayLabel->setFont(QFont("Arial", 20));// 創(chuàng)建網(wǎng)格布局gridLayout = new QGridLayout();// 創(chuàng)建數(shù)字按鈕QStringList numberButtons = {"7", "8", "9", "4", "5", "6", "1", "2", "3", "0", "."};int row = 1, col = 0;for (const QString &text : numberButtons) {QPushButton *button = createButton(text, SLOT(onNumberButtonClicked()));gridLayout->addWidget(button, row, col);col++;if (col > 2) {col = 0;row++;}}// 創(chuàng)建操作符按鈕QStringList operatorButtons = {"+", "-", "*", "/"};row = 1;col = 3;for (const QString &text : operatorButtons) {QPushButton *button = createButton(text, SLOT(onOperatorButtonClicked()));gridLayout->addWidget(button, row, col);row++;}// 創(chuàng)建等于按鈕QPushButton *equalButton = createButton("=", SLOT(onEqualButtonClicked()));gridLayout->addWidget(equalButton, 4, 3);// 創(chuàng)建清除按鈕QPushButton *clearButton = createButton("C", SLOT(onClearButtonClicked()));gridLayout->addWidget(clearButton, 0, 3);// 主布局QVBoxLayout *mainLayout = new QVBoxLayout();mainLayout->addWidget(displayLabel);mainLayout->addLayout(gridLayout);QWidget *centralWidget = new QWidget(this);centralWidget->setLayout(mainLayout);setCentralWidget(centralWidget);
}MainWindow::~MainWindow()
{// 析構(gòu)函數(shù)中釋放資源
}QPushButton *MainWindow::createButton(const QString &text, const char *member)
{QPushButton *button = new QPushButton(text, this);button->setFont(QFont("Arial", 20));connect(button, SIGNAL(clicked()), this, member);return button;
}void MainWindow::onNumberButtonClicked()
{QPushButton *button = qobject_cast<QPushButton*>(sender());if (button) {expression += button->text();displayLabel->setText(expression);}
}void MainWindow::onOperatorButtonClicked()
{QPushButton *button = qobject_cast<QPushButton*>(sender());if (button) {expression += button->text();displayLabel->setText(expression);}
}void MainWindow::onEqualButtonClicked()
{QString result = "";// 簡單的計(jì)算邏輯，這里可以使用更復(fù)雜的表達(dá)式求值算法if (!expression.isEmpty()) {std::string expr = expression.toStdString();try {double eval = 0;// 簡單計(jì)算eval = eval_expression(expr); result = QString::number(eval);} catch (const std::exception &e) {result = "Error";}displayLabel->setText(result);expression = result;}
}void MainWindow::onClearButtonClicked()
{expression = "";displayLabel->setText("0");
}

使用CMake構(gòu)建系統(tǒng)

CMake項(xiàng)目配置

CMakeLists.txt

cmake_minimum_required(VERSION 3.5)project(CalculatorApp)# 查找所需的QT模塊
find_package(Qt5 COMPONENTS Widgets REQUIRED)# 添加可執(zhí)行文件
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOUIC ON)set(SOURCESmainwindow.cppmain.cpp
)set(HEADERSmainwindow.h
)add_executable(CalculatorApp${SOURCES}${HEADERS}
)# 鏈接QT庫
target_link_libraries(CalculatorApp Qt5::Widgets)

CMake項(xiàng)目構(gòu)建

1. 創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)：

   CalculatorApp/
   ├── CMakeLists.txt
   ├── main.cpp
   ├── mainwindow.cpp
   ├── mainwindow.h
   

2. 配置CMake：

   cd CalculatorApp
   mkdir build
   cd build
   cmake..
   

3. 構(gòu)建項(xiàng)目：

   make
   

代碼解釋：

mainwindow.h：

• 定義了 MainWindow 類，繼承自 QMainWindow，包含顯示計(jì)算結(jié)果的 QLabel 以及處理各種按鈕點(diǎn)擊事件的槽函數(shù)。
• Q_OBJECT 宏是為了啟用信號(hào)與槽機(jī)制。

mainwindow.cpp：

• MainWindow 的構(gòu)造函數(shù)中，創(chuàng)建并布局了各種按鈕和顯示標(biāo)簽。
• createButton 函數(shù)用于創(chuàng)建按鈕并連接相應(yīng)的槽函數(shù)。
• 不同的槽函數(shù)（如 onNumberButtonClicked、onOperatorButtonClicked 等）處理不同按鈕的點(diǎn)擊事件。

CMakeLists.txt：

• cmake_minimum_required(VERSION 3.5)：指定所需的CMake最低版本。
• find_package(Qt5 COMPONENTS Widgets REQUIRED)：查找QT的Widgets模塊。
• set(CMAKE_AUTOMOC ON)、set(CMAKE_AUTORCC ON)、set(CMAKE_AUTOUIC ON)：啟用自動(dòng)生成MOC、RCC和UIC文件。
• add_executable(CalculatorApp ${SOURCES} ${HEADERS})：創(chuàng)建可執(zhí)行文件。
• target_link_libraries(CalculatorApp Qt5::Widgets)：將可執(zhí)行文件與QT的Widgets庫鏈接。

使用步驟：

1. 確保已安裝QT和CMake。
2. 創(chuàng)建上述項(xiàng)目目錄結(jié)構(gòu)并將代碼文件和CMake文件放入其中。
3. 按照上述步驟配置和構(gòu)建項(xiàng)目。
4. 運(yùn)行生成的可執(zhí)行文件，即可看到一個(gè)簡單的計(jì)算器應(yīng)用程序。
   

注意事項(xiàng)：

• 在使用CMake構(gòu)建QT項(xiàng)目時(shí)，確保QT的開發(fā)環(huán)境變量設(shè)置正確，以便CMake能找到QT庫。
• 對(duì)于更復(fù)雜的項(xiàng)目，可能需要添加更多的源文件、頭文件和資源文件，相應(yīng)地需要在 CMakeLists.txt 中進(jìn)行配置。

使用 CMake-GUI 創(chuàng)建 Visual Studio 項(xiàng)目（基于 QT）

一、準(zhǔn)備工作

1. 確保已經(jīng)安裝了以下軟件：
   • Visual Studio：不同版本均可，但建議使用較新的穩(wěn)定版，如 Visual Studio 2019 或 2022，安裝時(shí)要包含 C++ 開發(fā)組件。
   • CMake：下載并安裝適合你操作系統(tǒng)的版本，CMake 是跨平臺(tái)的項(xiàng)目構(gòu)建工具，它將幫助我們生成 Visual Studio 項(xiàng)目文件。
   • QT：安裝 QT 開發(fā)環(huán)境，根據(jù)你的需求選擇相應(yīng)的版本和模塊。例如，如果你要進(jìn)行圖形界面開發(fā)，要確保安裝了 QT Widgets 等基礎(chǔ)模塊。

二、打開 CMake-GUI

1. 啟動(dòng) CMake-GUI 應(yīng)用程序，你會(huì)看到它的主界面分為幾個(gè)主要區(qū)域：
   • 上部：用于設(shè)置源目錄（Where is the source code）和構(gòu)建目錄（Where to build the binaries）。
   • 中部：各種配置選項(xiàng)，會(huì)根據(jù)項(xiàng)目的特性而有所不同。
   • 下部：操作按鈕，如“Configure”“Generate”等。

三、配置源目錄和構(gòu)建目錄

1. 在“Where is the source code”文本框中，瀏覽并選擇你的 QT 項(xiàng)目的根目錄，這個(gè)目錄包含了你的項(xiàng)目源代碼文件（通常是 .cpp、.h 文件以及 CMakeLists.txt 文件）。
   • 例如，如果你的項(xiàng)目名為“MyQTProject”，且存放在 C:\Projects\MyQTProject 目錄下，就將此目錄填入源目錄文本框。
2. 在“Where to build the binaries”文本框中，選擇一個(gè)用于存放構(gòu)建生成文件的目錄，這個(gè)目錄最好與源目錄分開，方便管理。
   • 可以在源目錄同級(jí)創(chuàng)建一個(gè)名為“build”的目錄，如 C:\Projects\MyQTProject\build，并將其填入構(gòu)建目錄文本框。

四、點(diǎn)擊“Configure”按鈕

1. 此時(shí) CMake-GUI 會(huì)彈出一個(gè)對(duì)話框，讓你選擇生成器（Generator）。
   • 因?yàn)槲覀円獎(jiǎng)?chuàng)建 Visual Studio 項(xiàng)目，所以在下拉列表中選擇對(duì)應(yīng)的 Visual Studio 版本，如“Visual Studio 17 2022”（對(duì)應(yīng) Visual Studio 2022）或“Visual Studio 16 2019”等。
   • 同時(shí)，根據(jù)你的系統(tǒng)是 32 位還是 64 位，選擇相應(yīng)的平臺(tái)選項(xiàng)，如“Win32”或“x64”。點(diǎn)擊“OK”。
2. CMake 開始配置項(xiàng)目，它會(huì)讀取源目錄下的 CMakeLists.txt 文件，檢查依賴關(guān)系，嘗試找到所需的庫和頭文件路徑，包括 QT 相關(guān)的庫。這個(gè)過程可能會(huì)出現(xiàn)一些錯(cuò)誤提示，常見的問題及解決方法如下：
   • 找不到 QT 庫：
     • 原因：可能是 QT 安裝路徑未被 CMake 正確識(shí)別。
     • 解決方法：在 CMake-GUI 界面中，找到與 QT 相關(guān)的變量，如“QT_DIR”“QT_QMAKE_EXECUTABLE”等，手動(dòng)將其值設(shè)置為 QT 的實(shí)際安裝路徑。例如，如果 QT 安裝在 C:\Qt\5.15.2\msvc2019_64，則將對(duì)應(yīng)的變量值修改為此路徑。
   • 編譯選項(xiàng)不兼容：
     • 原因：不同版本的軟件組件之間可能存在編譯選項(xiàng)沖突。
     • 解決方法：仔細(xì)查看錯(cuò)誤提示，根據(jù)提示調(diào)整 CMakeLists.txt 文件中的編譯選項(xiàng)，例如，更改某些庫的鏈接方式、包含頭文件的路徑等。

五、配置項(xiàng)目細(xì)節(jié)（可選）

1. 在 CMake 完成首次配置后，你可以在 CMake-GUI 的中部區(qū)域看到一系列的配置選項(xiàng)。
   • 一些常用的選項(xiàng)包括：項(xiàng)目的名稱、版本號(hào)、生成的可執(zhí)行文件或庫的類型（靜態(tài)庫、動(dòng)態(tài)庫、可執(zhí)行程序等）。
   • 對(duì)于 QT 項(xiàng)目，還可能涉及到 QT 模塊的選擇，如是否啟用 QT Widgets、QT Multimedia 等模塊，你可以根據(jù)項(xiàng)目需求勾選或取消勾選相應(yīng)的選項(xiàng)。

六、點(diǎn)擊“Generate”按鈕

1. 當(dāng)你對(duì)配置選項(xiàng)滿意后，點(diǎn)擊“Generate”按鈕。
   • CMake 會(huì)根據(jù)你的配置生成 Visual Studio 項(xiàng)目文件，這個(gè)過程通常很快。生成成功后，你會(huì)在構(gòu)建目錄下看到一系列的文件和子目錄，其中最重要的是一個(gè)擴(kuò)展名為 .sln 的解決方案文件，這就是你的 Visual Studio 項(xiàng)目文件。

七、打開 Visual Studio 項(xiàng)目

1. 進(jìn)入構(gòu)建目錄，找到生成的 .sln 文件，雙擊打開它，Visual Studio 將會(huì)啟動(dòng)并加載你的項(xiàng)目。
2. 在 Visual Studio 中，你可以像往常一樣進(jìn)行項(xiàng)目的編譯、調(diào)試等操作。需要注意的是，由于是 QT 項(xiàng)目，可能在運(yùn)行時(shí)需要配置一些 QT 相關(guān)的環(huán)境變量，確保程序能夠正確找到 QT 庫，避免運(yùn)行時(shí)錯(cuò)誤，如“找不到 QT 插件”等問題。