1. 前言

上一篇博客，總結了Qt的一些基礎用法，這篇博客繼續跟視頻學習Qt的常用方法

Qt入門系列：
Qt學習之C++基礎
Qt學習之Qt安裝
Qt學習之Qt基礎入門(上)
Qt學習之Qt基礎入門(中)
Qt學習之Qt基礎入門(下)

本文原創，創作不易，轉載請注明！！！
本文鏈接
個人博客: https://ronglin.fun/archives/220
PDF鏈接：見博客網站
CSDN: https://blog.csdn.net/RongLin02/article/details/120661304**

2. QMainWindow

QMainWindow作為一個主窗口，有很多方便的控件可以用

2.1. 菜單欄

菜單欄最多只有一個

QMenuBar * bar = MenuBar(); this->setMenuBar( bar ) QMenu * fileMenu = bar -> addMenu(“文件”) 創建菜單 QAction * newAction = fileMenu ->addAction(“新建”); 創建菜單項 //添加分割線 fileMenu->addSeparator();

2.2. 工具欄

可以有多個

QToolBar * toolbar = new QToolBar(this); addToolBar( 默認停靠區域， toolbar ); //例如:Qt::LeftToolBarArea

可以設置后期停靠區域，設置浮動，設置移動，添加菜單項 或者添加 小控件等等

2.3. 狀態欄

最多一個

QStatusBar * stBar = statusBar(); setStatusBar(stBar); //設置到窗口中 stBar->addWidget(label); //放左側信息 stBar->addPermanentWidget(label2); //放右側信息

2.4. 鉚接部件

浮動窗口 可以多個
QDockWidget
addDockWidget( 默認停靠區域，浮動窗口指針)
設置后期?？繀^域

2.5. 設置核心部件

只能一個

this->setCentralWidget(edit);

以上這些在ui中均已經創建完畢，如果想要靈活使用，可以查詢API

3. 資源文件

首先要將圖片文件拷貝到項目位置下，我這里在項目根目錄創建一個image文件夾，里邊放入了一張圖片

然后在開發工具中，右鍵項目->添加新文件 –> Qt - >Qt recourse File

然后起名字，叫res，然后路徑也選擇項目根目錄

然后它會生成一個res.qrc的資源文件
然后對著res.qrc右鍵 -> open in editor -> 編輯資源
在右側，添加前綴 我這里前綴起名/
前綴添加完畢后，再點擊 添加文件，然后選擇要添加的圖片等資源文件，可以多選，然后再 右鍵項目 -> 重新構建
之后如果工程中出現圖片，則說明導入完成

資源文件導入完畢，使用的時候可以這樣使用“ : + 前綴名 + 文件名 ” 例如

this->setWindowIcon(QIcon(":/image/test.png"));

這樣就能在項目中使用導入的資源了，例如這個方法就是設置程序的圖標

4. 對話框

對話框是一個特別常見的界面，比如當用戶退出程序的時候，會彈出來一個對話框詢問是否要退出等等，下面介紹常用的對話框。

4.1. 分類

常見對話框一共用兩種分類，一個是模態對話框，一個是非模態對話框，模態對話框彈出時，只能對本對話框操作，不能對其他窗口操作，而模態對話框可以對其他窗口操作

4.1.1. 模態對話框

不可以對其他窗口進行操作，其他窗口為阻塞狀態
代碼見下注釋區，效果如圖

.1.2. 非模態對話框
可以對其他窗口進行操作
代碼見下，效果如圖

4.1.2. 實例代碼

注意非模態對話框，為了防止一閃而過，要創建到堆區
同時如果實現上圖的效果，要在ui中拖動一個pushButton到主界面中
然后用connect函數實現這個按鈕的功能，用Lambda表達式快速實現

#include "mainwindow.h" #include "ui_mainwindow.h" #include <QDebug> #include <QDialog>MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow) {ui->setupUi(this);connect(ui->pushButton,&QPushButton::clicked,[=](){ // QDialog dlg(this); // dlg.setWindowTitle("模態對話框"); // dlg.resize(300,100); // dlg.show();QDialog* dlg = new QDialog(this);dlg->setWindowTitle("非模態對話框");dlg->resize(300,100);dlg->show();}); } MainWindow::~MainWindow() {delete ui; }

4.2. 標準對話框

4.2.1. 總述

所謂標準對話框，是 Qt 內置的一系列對話框，用于簡化開發。事實上，有很多對話框都是通用的，比如打開文件、設置顏色、打印設置等。這些對話框在所有程序中幾乎相同，因此沒有必要在每一個程序中都自己實現這么一個對話框。
Qt 的內置對話框大致分為以下幾類：

QColorDialog： 選擇顏色； QFileDialog： 選擇文件或者目錄； QFontDialog： 選擇字體； QInputDialog： 允許用戶輸入一個值，并將其值返回； QMessageBox： 模態對話框，用于顯示信息、詢問問題等； QPageSetupDialog： 為打印機提供紙張相關的選項； QPrintDialog： 打印機配置； QPrintPreviewDialog：打印預覽； QProgressDialog： 顯示操作過程。

4.2.2. 消息對話框

模態對話框，消息對話框的創建，要用QMessageBox的靜態成員函數，在API中可以看到，一共有4種消息對話框，這四種對話框的返回值是StandardButton類型，可以利用返回值判斷用戶點擊了哪個按鈕

4.2.2.1. 錯誤對話框

效果如左上

//函數 StandardButton critical(QWidget *parent, const QString &title, const QString &text, StandardButtons buttons = Ok, StandardButton defaultButton = NoButton)//用法 QMessageBox::critical(this,"錯誤對話框","這是一個critical對話框");

4.2.2.2. 信息對話框

效果如右上

//函數 StandardButton information(QWidget *parent, const QString &title, const QString &text, StandardButtons buttons = Ok, StandardButton defaultButton = NoButton)//用法 QMessageBox::information(this,"信息對話框","這是一個information對話框")

可以看到，在構造函數中，還有兩個參數，一個是StandardButtons，就是信息對話框里邊ok的那個，還有參數一個是defaultButton，是默認光標所在的按鈕。

4.2.2.3. 提問對話框

效果如左下

StandardButton question(QWidget *parent, const QString &title, const QString &text, StandardButtons buttons = StandardButtons( Yes | No ), StandardButton defaultButton = NoButton)//用法 QMessageBox::question(this,"提問對話框","這是一個question對話框");

第四個參數有些特別，用到了 | 符號，實際可以這樣用QMessageBox::Save|QMessageBox::Close表示同時顯示兩個按鈕，一個是保存，一個是關閉，這兩個在QMessageBox中都有定義

4.2.2.4. 警告對話框

效果如右下

StandardButton warning(QWidget *parent, const QString &title, const QString &text, StandardButtons buttons = Ok, StandardButton defaultButton = NoButton)//用法 QMessageBox::warning(this,"警告對話框","這是一個warning對話框");

5. 界面布局

界面布局主要就是在ui設置，尤其是在可視化界面中拖動圖標設置。
利用布局方式 給窗口進行美化

5.1. 布局方法

比如，我們在界面中，選中兩個按鈕，（摁住Ctrl鍵，再點擊另一個控件可實現多選），然后點擊上方的垂直布局，然后就發現兩個按鈕上下排列，并且1：1對齊了

一共有多種對齊方式：水平布局、垂直布局、柵格布局
如果設置的布局不喜歡，可以右鍵->打破布局
如果默認窗口和控件之間 有間隙，可以調整在右下角的layoutLeftMargin屬性
同時也可以利用彈簧進行布局，在Spacers，下有垂直彈簧和水平彈簧，可以自動填充

5.2. 按比例布局

有的時候，一個布局中存在多個控件，我們希望組件按照一定的比例排布而不是默認，這樣的話，我們在布局 完成后，在右側點擊QVBoxLayout類，然后在右側下方，有一個layoutStretch屬性，里邊有幾個值，如果這個布局中有3個控件就有3個值，如果是有四個控件就有4個值，按照下圖為例，我有三個控件，一個是QFrame一個QListView，一個是pushButton，我想讓他們按照3：5：1的比例排布，就設置3,5,1，效果如圖。

這個功能特別好用，尤其是在界面可變大小的程序中，當用戶拉伸界面的時候，我們希望我們的程序內部的控件仍然按照比例縮放，這時候就可用這個方法設置了。

6. 控件

控件有太多了，在ui界面中已經顯示了很多，如果不太清楚它的用法，去查詢API也能大概搞懂，這里只是大概過一下。

6.1. 按鈕組

QPushButton是一個常用按鈕
QToolButton是一個工具按鈕 用于顯示圖片，如圖想顯示文字，修改風格：toolButtonStyle ， 凸起風格autoRaise
radioButton是一個單選按鈕，設置默認ui->radioButton->setChecked(true);
checkbox多選按鈕，監聽狀態，2 選中 1 半選 0 未選中

關于后兩個按鈕多說一嘴，因為選項都是一組的，尤其是在radioButton中，我們希望一組選項中只有一個選中，那么就可以把備選選項都拖入一個GroupBox中，然后這樣就會默認一個GroupBox中是同一組，同一組中的選項就只能選擇一個了。如下圖：

6.2. QListWidget 列表容器

QListWidgetItem * item //顯示一行內容 ui->listWidget ->addItem ( item ) item->setTextAlignment(Qt::AlignHCenter); //設置居中方式

可以利用addItems一次性添加整個詩內容，用法如下

//利用listWidget寫詩 // QListWidgetItem * item = new QListWidgetItem("鋤禾日當午"); // //將一行詩放入到listWidget控件中 // ui->listWidget->addItem(item); // item->setTextAlignment(Qt::AlignHCenter);//QStringList QList<QString>QStringList list ;list << "鋤禾日當午" << "旱地和下土" << "誰知盤中餐"<< "粒粒皆辛苦";ui->listWidget->addItems(list);

6.3. QTreeWidget 樹控件

要先設置頭，然后創建一個根節點，添加根節點 到 樹控件上，之后再往根節點上添加子節點

用法如下：

//treeWidget樹控件使用//設置水平頭ui->treeWidget->setHeaderLabels(QStringList()<< "英雄"<< "英雄介紹");QTreeWidgetItem * liItem = new QTreeWidgetItem(QStringList()<< "力量");QTreeWidgetItem * minItem = new QTreeWidgetItem(QStringList()<< "敏捷");QTreeWidgetItem * zhiItem = new QTreeWidgetItem(QStringList()<< "智力");//加載頂層的節點ui->treeWidget->addTopLevelItem(liItem);ui->treeWidget->addTopLevelItem(minItem);ui->treeWidget->addTopLevelItem(zhiItem);//追加子節點QStringList heroL1;heroL1 << "剛被豬" << "前排坦克，能在吸收傷害的同時造成可觀的范圍輸出";QTreeWidgetItem * l1 = new QTreeWidgetItem(heroL1);liItem->addChild(l1);

6.4. QTableWidget 表格控件

要設置列數，設置水平表頭，設置行數，同時設置正文

//TableWidget控件//設置列數ui->tableWidget->setColumnCount(3);//設置水平表頭ui->tableWidget->setHorizontalHeaderLabels(QStringList()<<"姓名"<< "性別"<< "年齡");//設置行數ui->tableWidget->setRowCount(5);//設置正文//ui->tableWidget->setItem(0,0, new QTableWidgetItem("亞瑟"));QStringList nameList;nameList<< "亞瑟"<< "趙云"<< "張飛"<< "關羽" << "花木蘭";QList<QString> sexList;sexList << "男"<< "男"<< "男"<< "男"<< "女";for(int i = 0 ; i < 5 ;i ++){int col = 0;ui->tableWidget->setItem(i,col++, new QTableWidgetItem(nameList[i]));ui->tableWidget->setItem(i,col++, new QTableWidgetItem(sexList.at(i)));//int 轉 QStringui->tableWidget->setItem(i,col++, new QTableWidgetItem( QString::number(i+18)));}

6.5. 其他控件介紹

stackedWidget 棧控件

ui->stackedWidget->setCurrentIndex(1);

下拉框

ui->comboBox->addItem("奔馳");

QLabel 顯示圖片

ui->lbl_Image->setPixmap(QPixmap(":/Image/butterfly.png"))

QLabel顯示動圖 gif圖片

ui->lbl_movie->setMovie(movie); movie->start();

以上控件用法見下：

//?？丶褂?/設置默認定位 scrollAreaui->stackedWidget->setCurrentIndex(1);//scrollArea按鈕connect(ui->btn_scrollArea,&QPushButton::clicked,[=](){ui->stackedWidget->setCurrentIndex(1);});//toolBox按鈕connect(ui->btn_ToolBox,&QPushButton::clicked,[=](){ui->stackedWidget->setCurrentIndex(2);});//TabWidget按鈕connect(ui->btn_TabWidget,&QPushButton::clicked,[=](){ui->stackedWidget->setCurrentIndex(0);});//下拉框ui->comboBox->addItem("奔馳");ui->comboBox->addItem("寶馬");ui->comboBox->addItem("拖拉機");//點擊按鈕 選中拖拉機選項connect(ui->btn_select,&QPushButton::clicked,[=](){//ui->comboBox->setCurrentIndex(2);ui->comboBox->setCurrentText("拖拉機");});//利用QLabel顯示圖片ui->lbl_Image->setPixmap(QPixmap(":/Image/butterfly.png"));//利用QLabel顯示 gif動態圖片QMovie * movie = new QMovie(":/Image/mario.gif");ui->lbl_movie->setMovie(movie);//播放動圖movie->start();

7. 總結

這篇博客主要總結ui界面的設計，其實在API中都有教程，這里只是過一下。
未完待續，=w=

總結

以上是生活随笔為你收集整理的Qt学习之Qt基础入门(中)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。