二、UI入門

1. QWidget類（熟悉）

QWidget類是所有組件和窗口的基類，內部包含了一些基礎的界面特性。

常用屬性：

1. 修改坐標

• x?:?const?int

橫坐標，每個圖形的左上角為定位點，橫軸的零點在屏幕的最左邊，正方向向右。

• y?:?const?int

縱坐標，每個圖形的左上角為定位點，?縱軸的零點在屏幕的最上邊。正方向向下。

雖然橫坐標與縱坐標無法直接修改，但是可以通過函數間接進行修改。

// 參數1：新的橫坐標
//?參數2：新的縱坐標
void	move(int?x,?int?y)

1. 修改寬高

• width?:?const?int

寬度，不包含邊框

• height?:?const?int

高度，不包含邊框

//?參數1：新的寬度
//?參數2：新的高度
void	resize(int?w,?int?h)

可以通過下面函數，直接設置上述四個屬性。

//?參數是x、y，w、h寬高
void	setGeometry(int?x,?int?y,?int?w,?int?h)

dialog.cpp

#include?"dialog.h"//?構造函數定義
Dialog::Dialog(QWidget?*parent)
????:?QDialog(parent)?//?透傳構造。parent：參數
{
????qDebug()?<<?"構造函數"?<<?"helloworld";
????//?移動w?到200、200的位置
????move(200,200);
????//?設置w的寬高
????resize(200,600);}//?析構函數
Dialog::~Dialog()
{}

1. 修改樣式

• styleSheet?:?QString

樣式表，QString為Qt的字符串類型，樣式表使用QSS語法（模仿前端CSS語法）。

#include?"dialog.h"//?構造函數定義
Dialog::Dialog(QWidget?*parent)
????:?QDialog(parent)?//?透傳構造。parent：參數
{
????qDebug()?<<?"構造函數"?<<?"helloworld";
????//?移動w?到200、200的位置
????move(200,200);
????//?設置w的寬高
????resize(200,600);????//?設置樣式表（設置背景顏色）
????setStyleSheet("background-color:red");
}//?析構函數
Dialog::~Dialog()
{}

2、添加子組件（掌握）

上面的窗口中什么都沒有，實際上可以向窗口周昂添加若干組件，實現不同的顯示和交互效果，本節以QPushButton（按壓式按鈕）組件為例子。

QPushButton要持續存在，直到窗口關閉，因此使用堆內存

//?參數1：按鈕上顯示的文字
//?參數2：現階段可以認為是給當前組件設置父窗口。
?QPushButton(const?QString?&?text,?QWidget?*?parent?=?0)

#include?"dialog.h"//?構造函數定義
Dialog::Dialog(QWidget?*parent)
????:?QDialog(parent)?//?透傳構造。parent：參數
{
????qDebug()?<<?"構造函數"?<<?"helloworld";
????//?移動w?到200、200的位置
????move(200,200);
????//?設置w的寬高
????resize(200,600);????//?設置樣式表（設置背景顏色）
//????setStyleSheet("background-color:red");
????//?創建一個按鈕對象
????//?參數1：按鈕顯示的文字
????//?參數2：在當前對象窗口中創建一個按鈕，this指向當前對象（w）
????btn?=?new?QPushButton("你好",this);
????btn->move(50,200);
}//?析構函數
Dialog::~Dialog()
{
????delete?btn;
}

以下是一個預設好的QPushButton的樣式表，可以根據需求自行更改。

#define?QPushButton_STYTLE?(QString("\
/*按鈕普通態*/\
QPushButton\
{\
????font-family:Microsoft?Yahei;\
????/*字體大小為20點*/\
????font-size:20pt;\
????/*字體顏色為白色*/\
????color:white;\
????/*背景顏色*/\
????background-color:rgb(14?,?150?,?254);\
????/*邊框圓角半徑為8像素*/\
????border-radius:8px;\
}\
/*按鈕懸停態*/\
QPushButton:hover\
{\
????/*背景顏色*/\
????background-color:rgb(100?,?137?,?255);\
}\
/*按鈕按下態*/\
QPushButton:pressed\
{\
????/*背景顏色*/\
????background-color:rgb(14?,?135?,?10);\
????/*左內邊距為3像素，讓按下時字向右移動3像素*/\
????padding-left:3px;\
????/*上內邊距為3像素，讓按下時字向下移動3像素*/\
????padding-top:3px;\
}"))

推薦兩個配色網站

在線顏色選擇器 | RGB顏色查詢對照表

Color Palette Generator - Create Beautiful Color Schemes

dialog.h

#ifndef?DIALOG_H
#define?DIALOG_H//?添加頭文件QDialog對話框基類。Qt自帶類型通常使用Q開頭
#include?<QDialog>
#include?<QDebug>
#include?<QPushButton>#define?QPushButton_STYTLE?(QString("\
/*按鈕普通態*/\
QPushButton\
{\
????font-family:Microsoft?Yahei;\
????/*字體大小為20點*/\
????font-size:20pt;\
????/*字體顏色為白色*/\
????color:white;\
????/*背景顏色*/\
????background-color:rgb(14?,?150?,?254);\
????/*邊框圓角半徑為8像素*/\
????border-radius:8px;\
}\
/*按鈕懸停態*/\
QPushButton:hover\
{\
????/*背景顏色*/\
????background-color:rgb(100?,?137?,?255);\
}\
/*按鈕按下態*/\
QPushButton:pressed\
{\
????/*背景顏色*/\
????background-color:rgb(14?,?135?,?10);\
????/*左內邊距為3像素，讓按下時字向右移動3像素*/\
????padding-left:3px;\
????/*上內邊距為3像素，讓按下時字向下移動3像素*/\
????padding-top:3px;\
}"))//?繼承QDialog（對話框基類）
class?Dialog?:?public?QDialog
{
????//?先放著
????Q_OBJECTpublic:
????Dialog(QWidget?*parent?=?0);?//?構造函數
????~Dialog();??//?析構函數
private:
????QPushButton?*btn;
};#endif?//?DIALOG_H

dialog.cpp

#include?"dialog.h"//?構造函數定義
Dialog::Dialog(QWidget?*parent)
????:?QDialog(parent)?//?透傳構造。parent：參數
{
????qDebug()?<<?"構造函數"?<<?"helloworld";
????//?移動w?到200、200的位置
????move(200,200);
????//?設置w的寬高
????resize(200,600);????//?設置樣式表（設置背景顏色）
//????setStyleSheet("background-color:red");
????//?創建一個按鈕對象
????//?參數1：按鈕顯示的文字
????//?參數2：在當前對象窗口中創建一個按鈕，this指向當前對象（w）
????btn?=?new?QPushButton("你好",this);
????btn->move(50,200);
????//?設置樣式給按鈕對象
????btn->setStyleSheet(QPushButton_STYTLE);
}//?析構函數
Dialog::~Dialog()
{
????delete?btn;
}