Qt 是目前最先進、最完整的跨平臺C++開發工具。它不僅完全實現了一次編寫，所有平臺無差別運行，更提供了幾乎所有開發過程中需要用到的工具。如今，Qt已被運用于超過70個行業、數千家企業，支持數百萬設備及應用。

在本文中，我們通過使用C++和Qt Widgets模塊實現一個簡單的記事本應用程序來學習基本的Qt知識，該應用程序是一個小型的文本編輯器，允許您創建文本文件、保存、打印或重新打開并在此編輯它，還可以設置要使用的字體。

在上文中（點擊這里回顧>>），我們為大家介紹了主源文件的生成、如何開始設計用戶界面，本文將為大家詳細介紹設計用戶界面的具體步驟。

Qt技術交流群：166830288      歡迎一起進群討論

設計一個用戶界面

使用Qt Designer（設計器）

向導創建一個使用的應用程序，它有自己的布局，您可以在其中添加菜單欄、dock小部件、工具欄和狀態欄。中心區域可以被任何類型的小部件占用，向導將Notepad小部件放在那里。

在Qt Designer中添加小部件：

1. 在Qt Creator編輯模式下，雙擊記事本，在集成的Qt設計器中啟動該文件。
2. 將小部件文本編輯器()拖放到表單中。
3. 按Ctrl+A(或Cmd+A)選擇小部件，然后單擊Lay out Vertically(或按Ctrl+L)應用垂直布局()。
4. 按Ctrl+S(或Cmd+S)保存更改。

UI現在看起來像下面的Qt Designer：

您可以在代碼編輯器中查看生成的XML文件：

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
<class>Notepad</class>
<widget class="QMainWindow" name="Notepad">
<property name="geometry">
<rect>
<x>0</x>
<y>0</y>
<width>800</width>
<height>400</height>
</rect>
</property>
<property name="windowTitle">
<string>Notepad</string>
</property>
<widget class="QWidget" name="centralWidget">
<layout class="QVBoxLayout" name="verticalLayout">
<item>
<widget class="QTextEdit" name="textEdit"/>
</item>
</layout>
</widget>
<widget class="QMenuBar" name="menuBar">
...

下面一行包含XML聲明，它指定了文檔中使用的XML版本和字符編碼：

<?xml version="1.0" encoding="UTF-8"?>

文件的其余部分指定了一個UI元素，該元素定義了一個Notepad小部件：

<ui version="4.0">

UI文件與Notepad類的頭文件和源文件一起使用，我們將在后面的小節中查看UI文件的其余部分。

Notepad Header文件

向導為Notepad類生成了一個頭文件，其中包含必要的#includes、構造函數、析構函數和UI對象。該文件如下所示：

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui {
class Notepad;
}
QT_END_NAMESPACE

class Notepad : public QMainWindow
{
Q_OBJECT

public:
explicit Notepad(QWidget *parent = nullptr);
~Notepad();

private:
Ui::Notepad *ui;
QString currentFile;
};

下面這行包括，它提供了一個主應用程序窗口：

下面幾行在UI命名空間中聲明Notepad類，這是uic工具從.ui文件生成的UI類的標準命名空間：

namespace Ui {
class Notepad;
}

類聲明包含Q_OBJECT宏，它必須首先出現在類定義中，并將類聲明為。當然它也必須繼承QObject，QObject為一個普通的c++類添加了一些功能。值得注意的是，類名和槽名可以在運行時查詢，還可以查詢槽的參數類型并調用它。

class Notepad : public QMainWindow
{
Q_OBJECT

下面幾行聲明了一個構造函數，它有一個默認實參parent，值0表示該小部件沒有父部件(它是頂級小部件)。

public:
explicit Notepad(QWidget *parent = nullptr);

下面一行聲明了一個虛析構函數來釋放對象在其生命周期中獲得的資源，根據c++的命名約定，析構函數具有與其關聯的類相同的名稱，并以波浪號(~)作為前綴。在QObject中，析構函數是虛函數，以確保在通過指向基類的指針刪除對象時正確調用派生類的析構函數。

~Notepad();

下面幾行聲明了一個成員變量，它是指向Notepad UI類的指針。成員變量與特定的類相關聯，并且它的所有方法都可以訪問。

private:
Ui::Notepad *ui;
QString currentFile;
};

Notepad源文件

向導為記事本類生成的源文件如下所示：

#include "notepad.h"
#include "ui_notepad.h"

Notepad::Notepad(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::Notepad)
{
ui->setupUi(this);

}

以下幾行包括由向導生成的記事本類頭文件和由UI工具生成的UI頭文件：

#include "notepad.h"
#include "ui_notepad.h"

下面一行定義了Notepad的構造函數：

Notepad::Notepad(QWidget *parent) :

下面這行調用QMainWindow構造函數，它是Notepad類的基類：

QMainWindow(parent),

下面這行代碼創建了UI類實例并將其賦值給UI成員：

ui(new Ui::Notepad)

下面這行設置了UI：

{
ui->setupUi(this);

在析構函數中，刪除UI：

Notepad::~Notepad()
{
delete ui;
}

項目文件

向導為我們生成以下項目文件CMakeLists.txt：

# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: BSD-3-Clause

cmake_minimum_required(VERSION 3.16)
project(notepad LANGUAGES CXX)

if(NOT DEFINED INSTALL_EXAMPLESDIR)
set(INSTALL_EXAMPLESDIR "examples")
endif()

set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/widgets/tutorials/notepad")

find_package(Qt6
REQUIRED COMPONENTS Core Gui Widgets
OPTIONAL_COMPONENTS PrintSupport
)

qt_standard_project_setup()

qt_add_executable(notepad
main.cpp
notepad.cpp notepad.h notepad.ui
)

set_target_properties(notepad PROPERTIES
WIN32_EXECUTABLE TRUE
MACOSX_BUNDLE TRUE
)

target_link_libraries(notepad PRIVATE
Qt6::Core
Qt6::Gui
Qt6::Widgets
)

if(TARGET Qt6::PrintSupport)
target_link_libraries(notepad PRIVATE Qt6::PrintSupport)
endif()

# Resources:
set(notepad_resource_files
"images/bold.png"
"images/copy.png"
"images/create.png"
"images/cut.png"
"images/edit_redo.png"
"images/edit_undo.png"
"images/exit.png"
"images/font.png"
"images/info.png"
"images/italic.png"
"images/new.png"
"images/open.png"
"images/paste.png"
"images/pencil.png"
"images/print.png"
"images/save.png"
"images/save_as.png"
"images/underline.png"
)

qt_add_resources(notepad "notepad"
PREFIX
"/"
FILES
${notepad_resource_files}
)

install(TARGETS notepad
RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}"
BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}"
LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}"
)

項目文件指定項目中包含的源文件、頭文件和UI文件。

Qt Widget組件推薦

• QtitanRibbon - Ribbon UI組件：是一款遵循Microsoft Ribbon UI Paradigm for Qt技術的Ribbon UI組件，QtitanRibbon致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart - Qt類圖表組件：是一個C ++庫，代表一組控件，這些控件使您可以快速地為應用程序提供漂亮而豐富的圖表。
• QtitanDataGrid - Qt網格組件：提供了一套完整的標準 QTableView 函數和傳統組件無法實現的獨特功能。使您能夠將不同來源的各類數據加載到一個快速、靈活且功能強大的可編輯網格中，支持排序、分組、報告、創建帶狀列、拖放按鈕和許多其他方便的功能。
• QtitanDocking：允許您像 Visual Studio 一樣為您的偉大應用程序配備可停靠面板和可停靠工具欄。黑色、白色、藍色調色板完全支持 Visual Studio 2019 主題！