ui入门

一、QWidget类

         QWidget是Qt中所有用户界面对象的基类，即可视化组件和窗口的基类都是此类，因此QWidget类内部包含了大量的与UI相关的基础特性。

最最基础的属性：

• width : const int

宽度，单位像素，不计算边框。属性在文档中通常包含

Access functions表示此属性的读写相关函数，即setter和getter，另外还可能包含其他的读写函数，Qt中属性的getter往往都是与属性同名的函数，setter往往都是set+属性名；如果属性是bool类型，getter往往是 is+属性名。

掌握一些明明规则后期可以自动推理出函数名称，减少查阅文档的频率。

• height：const int

高度，单位像素，不计算标题栏和边框。

更改宽度和高度可以通过下面的函数：

// 改变大小

// 参数1：宽度

// 参数2：高度

void resize(int w, int h)

• x : const int
• 横坐标，单位像素，0在屏幕的最左，正方向向右。
• y : const int
• 纵坐标，单位像素，0在屏幕的最上，正方向向下。
• xy坐标是以QWidget的左上角为准，包含标题栏和边框。
• 可以通过下面的函数修改位置坐标：

// 移动到指定的坐标

// 参数1：横坐标

// 参数2：纵坐标

void move(int x, int y)

// 参数1：横坐标

// 参数2：纵坐标

// 参数3：宽度

// 参数4：高度

void setGeometry(int x, int y, int w, int h)

 

二、添加子组件（掌握）

本节以QPushButton（最常见的按钮）为例，说明如何通过C++代码向一个窗口中添加子组件。

相关函数：

// 构造函数

// 参数1：按钮的text属性值，表示按钮显示的文字

// 参数2：创建的按钮对象父级窗口，在Qt前期可以简单的通过构造函数有无此参数决定是否使用堆内存对象

QPushButton::​QPushButton(const QString & text, QWidget * parent = 0)

创建的子组件默认在父窗口的左上角，子组件位置的坐标系就是整个窗口，窗口的左上角就是原点。

dialog.h

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

#include <QDebug>

#include <QPushButton> // 按钮类

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

QPushButton* btn; // 属性（成员变量）

};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

// this->resize(500,500);

resize(500,500); // 更改w的大小

move(500,500); // 移动w的位置

// 创建一个堆内存按钮对象

btn = new QPushButton("周六",

this); // this+多态

// 移动并更改大小

btn->setGeometry(200,300,100,100);

}

Dialog::~Dialog()

{

delete btn;

}

三、 样式表（熟悉）

样式表使用QSS语言对界面进行美化，QSS实际上是一个阉割版的CSS，CSS是前端的编程语言。

QWidget中样式表属性为：

• styleSheet : QString

QString是Qt的字符串类型，只需要给此属性设置为合法的QSS语法字符串，就可以生效。

在计算机中颜色最常见的表示方式是RGB（Red、Green、Blue）记色法，每个颜色的光线亮度被称为一个通道，每个通道是8位（256个梯度）的，即0-255，0表示当前通道黑暗，255表示当前最亮。

例如，正红色为(255,0,0) 白色(255,255,255)，上面为10进制表示方式，也支持十六进制的表示方式 正红色为#FF0000 白色#FFFFFF......

#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;\

}"))

#ifndef DIALOG_H

#define DIALOG_H

#include <QDialog>

#include <QDebug>

#include <QPushButton> // 按钮类

#define QPushButton_STYTLE (QString("\

/*按钮普通态*/\

QPushButton\

{\

font-family:Microsoft Yahei;\

/*字体大小为20点*/\

font-size:20pt;\

/*字体颜色为白色*/\

color:white;\

/*背景颜色*/\

background-color:#FFD700;\

/*边框圆角半径为8像素*/\

border-radius:8px;\

}\

/*按钮悬停态*/\

QPushButton:hover\

{\

/*背景颜色*/\

background-color:#7b00ff;\

}\

/*按钮按下态*/\

QPushButton:pressed\

{\

/*背景颜色*/\

background-color:#b3a500;\

/*左内边距为3像素，让按下时字向右移动3像素*/\

padding-left:3px;\

/*上内边距为3像素，让按下时字向下移动3像素*/\

padding-top:3px;\

}"))

class Dialog : public QDialog

{

Q_OBJECT

public:

Dialog(QWidget *parent = 0);

~Dialog();

private:

QPushButton* btn; // 属性（成员变量）

};

#endif // DIALOG_H

#include "dialog.h"

Dialog::Dialog(QWidget *parent)

: QDialog(parent)

{

// this->resize(500,500);

resize(500,500); // 更改w的大小

move(500,500); // 移动w的位置

// 创建一个堆内存按钮对象

btn = new QPushButton("周六",

this); // this+多态

// 移动并更改大小

btn->setGeometry(200,300,100,100);

// 设置按钮的样式表属性

// btn->setStyleSheet("background-color:#FFD700;color:rgb(125, 38, 205)");

btn->setStyleSheet(QPushButton_STYTLE);

}

Dialog::~Dialog()

{

delete btn;

}