长春是几线城市2020排名_免费seo网站的工具_深圳网页设计_方象科技专注于什么领域

二、UI入门

1、QWidget类

Qwidget类是所有组件和窗口的基类，内部包含了一些最基础的界面的特性。

常用的属性：

1.1修改坐标

• x : const int

横坐标，每个图形的左上角为定位点。横轴的零点在屏幕的最左边，正方向向右。

• y : const int

纵坐标，每个图形的左上角为定位点，纵轴的零点在屏幕的最上边，正方向向下。

虽然横坐标和纵坐标无法直接进行修改，但是可以通过函数间接修改。

// 参数1：新的横坐标
// 参数2：新的纵坐标
void	move(int x, int y)

1.2修改宽高

• height : const int

高度，不包含边框

• width : const int

宽度，不包含边框

虽然宽度和高度无法直接修改，但是我们可以通过下面的函数间接修改：

// 参数1：新的宽度
// 参数2：新的高度
void	resize(int w, int h)

1.3修改样式

• styleSheet : QString

样式表，QString为Qt的字符串类型，样式表使用QSS语法(模仿的前端的CSS语法)。

// 设置样式
void	setStyleSheet(const QString & styleSheet)

dialog.cpp

#include "dialog.h"Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
   // 移动w到200，200的位置
   move(200,200);   // 设置w的宽高
   resize(200,600);   // 设置样式
   setStyleSheet("background-color:red");
}// 析构函数
Dialog::~Dialog()
{}

2、添加子组件

上面窗口中什么都没有，实际上可以向窗口中添加若干组件，实现不同的显式和交互效果，本节以QPushButton（按压式按钮）组件为例。

QPushButton要持续存在，直到窗口关闭，因此使用堆内存。按照C++的内存回收机制来说，子组件应该在父窗口的构造函数中创建，在析构函数里销毁。

子组件，默认在父窗口的0，0的位置，这是一个相对位置

// 参数1：按钮上显式的文字
// 参数2：现阶段可以认为是给当前组件设置父窗口
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_OBJECTpublic:
    // 构造函数
    Dialog(QWidget *parent = 0);
    // 析构函数
    ~Dialog();
    QPushButton *btn;   // 成员变量
};#endif // DIALOG_H

dialog.cpp

#include "dialog.h"Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
   // 移动w到200，200的位置
//   move(200,200);   // 设置w的宽高
   resize(600,600);   // 设置样式
//   setStyleSheet("background-color:red");   // 创建一个按钮对象
   // 参数1：按钮显式的文字
   // 参数2：在当前对象窗口中创建要给按钮，this指向当前对象
   btn = new QPushButton("你好",this);
   btn->move(200,200);}// 析构函数
Dialog::~Dialog()
{
    // C++ 内存回收
    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#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 , 100);\
}\
/*按钮按下态*/\
QPushButton:pressed\
{\
    /*背景颜色*/\
    background-color:rgb(14 , 135 , 10);\
    /*左内边距为3像素，让按下时字向右移动3像素*/\
    padding-left:3px;\
    /*上内边距为3像素，让按下时字向下移动3像素*/\
    padding-top:3px;\
}"))class Dialog : public QDialog
{
    Q_OBJECTpublic:
    // 构造函数
    Dialog(QWidget *parent = 0);
    // 析构函数
    ~Dialog();
    QPushButton *btn;   // 成员变量
};#endif // DIALOG_H

dialog.cpp

#include "dialog.h"Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
{
   // 移动w到200，200的位置
//   move(200,200);   // 设置w的宽高
   resize(600,600);   // 设置样式
//   setStyleSheet("background-color:red");   // 创建一个按钮对象
   // 参数1：按钮显式的文字
   // 参数2：在当前对象窗口中创建要给按钮，this指向当前对象
   btn = new QPushButton("你好",this);
   btn->move(200,200);   btn->setStyleSheet(QPushButton_STYTLE);}// 析构函数
Dialog::~Dialog()
{
    // C++ 内存回收
    delete btn;
}