QT的UI基础部分详细介绍

 

目录

UI基础

1. QWidget类（掌握）

2. 添加子组件（掌握）

3. 样式表（熟悉）

---

UI基础

1. QWidget类

QWidget类是所有可视化组件和窗口的基类，因此QWidget中成员可以继承给众多派生类使用。

QWidget最基础的属性：

• width : const int

宽度，单位像素

可以通过int width() const获得数值，即getter

• height : const int

高度，单位像素

getter：int height() const

• x : const int

横坐标，单位像素，原点左上角，正方向右

getter：int x() const

• y : const int

纵坐标，单位像素，原点左上角，正方向下

getter：int y() const

QWidget最基础的函数：

• void resize(int w, int h)

重定义宽高

• void move(int x, int y)

移动到设定的坐标处，所有的组件和窗口以左上角为定位点

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

同事设置坐标和宽高

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
// 头文件
#include <QDebug>

class Dialog : public QDialog
{
    Q_OBJECT

public:
    Dialog(QWidget *parent = 0);
    ~Dialog();
};

#endif // DIALOG_H

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    // 重定义宽高
    resize(1000,240);
    // this指针指向主函数中的w对象
    int w = this->width();
    int h = height();
    // 输出
    qDebug() << w << h;

    // 获得位置
    int x = this->x();
    int y = this->y();
    qDebug() << x << y; // 0,0 不准，因为窗口对象还在创建中
    // 移动
    move(100,100);

    // 同时设置坐标和宽高
    setGeometry(400,400,200,200);
}

Dialog::~Dialog()
{

}

2. 添加子组件

以最常见按钮（QPushButton）为例，讲解在窗口中添加子组件的方法。

QPushButton的构造函数如下：

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

参数1：按钮显示的文字

参数2：按钮在哪个对象上

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
// 头文件
#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)
{
    resize(400,400);
    // 创建一个按钮对象
    // 参数2是使用this指针结合多态传参
    btn = new QPushButton("初十",this);
    // 更改按钮大小
    btn->resize(100,100);
    // 移动按钮位置，注意坐标是窗口内部的相对坐标
    btn->move(100,100);
}

Dialog::~Dialog()
{
    // 释放按钮内存
    delete btn;
}

3. 样式表

Qt可以使用QSS语法设置组件的样式效果。

颜色的配置可以通过以下几个方法：

• QQ截图
• 在线色表+颜色进制转换

在线颜色选择器 | RGB颜色查询对照表

• 色彩搭配

Color Palette Generator - Create Beautiful Color Schemes

dialog.h

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>
// 头文件
#include <QPushButton>

#define QPushButton_STYTLE (QString("\
/*按钮普通态*/\
QPushButton\
{\
    font-family:Microsoft Yahei;\
    /*字体大小为20点*/\
    font-size:20pt;\
    /*字体颜色为粉色*/\
    color:rgb(238, 210, 238);\
    /*背景颜色*/\
    background-color:rgb(197,146,163);\
    /*边框圆角半径为8像素*/\
    border-radius:8px;\
}\
/*按钮悬停态*/\
QPushButton:hover\
{\
    /*背景颜色*/\
    background-color:#9F79EE;\
}\
/*按钮按下态*/\
QPushButton:pressed\
{\
    /*背景颜色*/\
    background-color:rgb(14 , 135 , 10);\
    /*左内边距为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

dialog.cpp

#include "dialog.h"

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
    resize(400,400);
    btn = new QPushButton("初十",this);
    // 设置样式表
    btn->setStyleSheet(QPushButton_STYTLE);

    btn->resize(100,100);
    btn->move(100,100);
}

Dialog::~Dialog()
{
    delete btn;
}