Table of contents
According to the design shown in the figure below, the button is centered as a whole, and the position is calculated by itself.
It is required to trigger the effect after clicking each button, and the interface effect is designed by itself using the style sheet, which is as beautiful as possible.
dialog.h
#ifndef DIALOG_H
#define DIALOG_H
#include <QDialog>
#include<QPushButton>
#include<QDebug>
#define QPushButton_STYTLE (QString("\
/*按钮普通态*/\
QPushButton\
{\
font-family:Microsoft Yahei;\
/*字体大小为20点*/\
font-size:20pt;\
/*字体颜色*/\
color:#c7e8ff;\
/*背景颜色*/\
background-color:#fb7756;\
/*边框圆角半径为8像素*/\
border-radius:8px;\
}\
/*按钮悬停态*/\
QPushButton:hover\
{\
/*背景颜色*/\
background-color:#1ac0c6;\
}\
/*按钮按下态*/\
QPushButton:pressed\
{\
/*背景颜色*/\
background-color:#facd60;\
/*左内边距为10像素，让按下时字向右移动10像素*/\
padding-left:10px;\
/*上内边距为10像素，让按下时字向下移动10像素*/\
padding-top:10px;\
}"))
#define QPushButton_STYTLE1 (QString("\
/*按钮普通态*/\
QPushButton\
{\
font-family:Microsoft Yahei;\
/*字体大小为20点*/\
font-size:20pt;\
/*字体颜色*/\
color:#c7e8ff;\
background-color:#e74645;\
/*边框圆角半径为8像素*/\
border-radius:8px;\
}\
/*按钮悬停态*/\
QPushButton:hover\
{\
background-color:#1ac0c6;\
}\
/*按钮按下态*/\
QPushButton:pressed\
{\
background-color:#facd60;\
padding-left:10px;\
padding-top:10px;\
}"))
class Dialog : public QDialog
{
Q_OBJECT
public:
Dialog(QWidget *parent = 0);
~Dialog();
private:
//按钮对象
QPushButton* btn;
QPushButton* btn1;
QPushButton* btn2;
QPushButton* btn3;
QPushButton* btn4;
private slots: //声明一个槽函数
void mySlot();
};
#endif // DIALOG_H
dialog.cpp
#include "dialog.h"
Dialog::Dialog(QWidget *parent)
: QDialog(parent)
{
resize(500,500);//设置窗口的宽高
btn=new QPushButton("中",this);
btn->setGeometry(175,175,150,150); //按钮的位置和宽高
btn->setStyleSheet(QPushButton_STYTLE1);//设置按钮的样式
connect(btn,SIGNAL(clicked()),this,SLOT(mySlot()));//通过点击按钮连接槽函数
btn1=new QPushButton("东",this);
btn1->setGeometry(25,200,150,100);
btn1->setStyleSheet(QPushButton_STYTLE);
btn2=new QPushButton("西",this);
btn2->setGeometry(325,200,150,100);
btn2->setStyleSheet(QPushButton_STYTLE);
btn3=new QPushButton("南",this);
btn3->setGeometry(175,325,150,100);
btn3->setStyleSheet(QPushButton_STYTLE);
btn4=new QPushButton("北",this);
btn4->setGeometry(175,75,150,100);
btn4->setStyleSheet(QPushButton_STYTLE);
}
void Dialog::mySlot()
{
//获取坐标位置
int x=this->x();
int y=this->y();
//移动
move(x+10,y+10);
//输出坐标
qDebug()<<this->x()<<this->y();
}
Dialog::~Dialog()
{
//销毁
delete btn;
delete btn1;
delete btn2;
delete btn3;
delete btn4;
}
operation result:
1. QWidget class
The QWidget class is the base class of all components and windows in Qt, which internally stipulates the basic rules and functions of components and windows.
There is an Access functions section in the document of each attribute in Qt , which indicates the read and write (getter and setter) functions it supports. The naming of getter and setter functions in Qt has the following rules:
- The name of the getter is usually the same as the name of the property, there is no get
- The name of the setter is usually set+property name
Common basic properties of QWidget:
- width : const int
Width, in pixels.
- height：const int
Height, in pixels.
Although the width and height cannot be changed directly through the setter, they can be modified through the following functions.
void resize(int w, int h)- x : const int
Abscissa, unit pixel, positive direction to the right.
- y : const int
The vertical coordinate is in pixels, and the positive direction is downward.
The screen in Qt is equivalent to the fourth quadrant of mathematics, so the origin is in the upper left corner of the screen, and the positioning point of components and windows is also its upper left corner.
Although the coordinates cannot be changed directly by the setter, they can be modified by the following function
void move(int x, int y)
You can use the following functions to set the position and width and height at the same time.
// 参数1：横坐标
// 参数2：纵坐标
// 参数3：宽度
// 参数4：高度
void setGeometry(int x, int y, int w, int h)
dialog.cpp
#include "dialog.h"
Dialog::Dialog(QWidget *parent)
: QDialog(parent)
{
// 设置窗口的宽高
resize(400,400);
// 移动窗口
move(100,100);
// 同时设置宽高和位置
setGeometry(300,300,200,200);
}
Dialog::~Dialog()
{
}
2. Subcomponents
Any component object can be placed in the window, taking QPushButton (clickable button) as an example.
The constructor of QPushButton:
// 参数1：显示文字，QString是Qt中的字符串类，不再使用std::string
// 参数2：可以先认为是父窗口对象，即当前创建的对象在哪个窗口中。
QPushButton::QPushButton(const QString & text,
QWidget * parent = 0)
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(300,300);
// 创建一个按钮对象
btn = new QPushButton("你好",this);
// 移动并更改大小
// 位置使用相对坐标
btn->setGeometry(100,100,100,100);
}
Dialog::~Dialog()
{
// 销毁按钮对象
delete btn;
}
3. Custom style
Style is a property of a QWidget:
styleSheet : QString
The content can be set through its setter. The content uses QSS syntax, which is similar to the CSS syntax in the front end. The following is a preset style sheet effect, which can be changed and tried.
#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;\
}"))