前言
本篇文章开始我将带大家构建一个属于自己的QT桌面，这个桌面将适用于ARM和Linux等。
一、按键类的创建
首先我们需要创建一个按键类，这个按键类需要包含一个按键和一个lable用来显示按键的名字。
效果如下：
这个就是我们桌面的APP图标了，图标设计可以去阿里的图标库里面找。之前串口的文章中已经带大家使用过这个图标库了，这里就不多说了。
新建一个APPButton的类：
二、按键样式设计
这里我们需要设置按键的样式让他更加符合APP按键的样式。在QT中普通的按键是四四方方的形状，但是你仔细去观察我们手机上的APP按键会发现他是圆角的，所以这里我们需要来将按键的样式设置为无边框，圆角的样式，这样更加符合我们的习惯。
这里我们使用QPushButton中的setStyleSheet函数来设置按键样式，将他设置为无边框，圆角，默认为白色背景。
/*设置按键的样式*/ /*无边框，圆角，默认为白色背景*/ m_button.setStyleSheet("QPushButton {\ border: none;\ border-radius: 10px;\ background-color: white;\ color: white;\ text-align: center;\ }" );
这里还需要设置一个按键按下的样式，当我们按下按键的时候会触发一个样式代表我们按下了这个按键。
按键按下后将按键设置为灰色，用来区分按键按下和松开的状态。
m_button.setStyleSheet("QPushButton {\ background-color: grey;\ border: none;\ border-radius: 10px;\ color: white;\ text-align: center;\ }");
三、详细代码讲解
这个APPButton类其实就是继承于QWidget的。
普通的按键的文字显示只能显示在按键中，无法将文字显示在按键的下方，所以这里需要QLabel创建一个label来显示按键名字。
APPButton.h
#ifndef APPBUTTON_H #define APPBUTTON_H #include <QWidget> #include <QPushButton> #include <QIcon> #include <QLabel> class APPButton : public QWidget { Q_OBJECT QPushButton m_button; QLabel m_label; public: explicit APPButton(QString name, QWidget *parent = nullptr); void SetAppButtonSize(int High, int width); void SetIcon(QString IconPath); protected slots: void button_pressed(); void button_released(); signals: void pressed(); void released(); public slots: }; #endif // APPBUTTON_H
APPButton.c
使用垂直布局管理器将按键和标签布局在一起。
这里主要就是要处理按键的按下和送开，当按键按下或者松开的时候会发送我们预先定义好的信号，这样处理主要就是为了能让外部来处理这个按下的信号，内部只做一些按键样式的切换。
#include "APPButton.h" #include <QVBoxLayout> #include <QPoint> #include <QDebug> APPButton::APPButton(QString name, QWidget *parent) : QWidget(parent), m_button(this), m_label(this) { /*设置按键的样式*/ /*无边框，圆角，默认为白色背景*/ m_button.setStyleSheet("QPushButton {\ border: none;\ border-radius: 10px;\ background-color: white;\ color: white;\ text-align: center;\ }" ); /*设置图标名字*/ m_label.setText(name); /*使用垂直布局管理器将按键和名字放在居中的位置*/ QVBoxLayout* Vlayout = new QVBoxLayout(this); Vlayout->addWidget(&m_button, 3, Qt::AlignCenter); Vlayout->addWidget(&m_label, 1, Qt::AlignCenter); Vlayout->setSpacing(1); /*连接按键的按下和松开的槽函数*/ connect(&m_button, SIGNAL(pressed()), this, SLOT(button_pressed())); connect(&m_button, SIGNAL(released()), this, SLOT(button_released())); } /*设置按键图标函数*/ void APPButton::SetIcon(QString IconPath) { //设置图标 m_button.setIcon(QIcon(IconPath)); // 图标自适应大小 m_button.setIconSize(m_button.size()); // 设置自适应大小策略 m_button.setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Preferred); } /*设置按键大小和名字大小*/ void APPButton::SetAppButtonSize(int High, int width) { setFixedSize(High, width); // 设置为固定大小,防止被布局管理器改变 m_button.setFixedSize(High*3/5, width*3/5); m_label.resize(High*1/5, width*1/5); } /*按下按键槽函数*/ void APPButton::button_pressed() { emit pressed();/*发送按下信号让外部处理*/ m_button.setStyleSheet("QPushButton {\ background-color: grey;\ border: none;\ border-radius: 10px;\ color: white;\ text-align: center;\ }"); } /*松开按键槽函数*/ void APPButton::button_released() { emit released();/*发送松开信号让外部处理*/ m_button.setStyleSheet("QPushButton {\ background-color: white;\ border: none;\ border-radius: 10px;\ color: white;\ text-align: center;\ }"); }
使用：
APPButton* appbutton = new APPButton("LED", this); appbutton->SetAppButtonSize(100, 100); appbutton->SetIcon(":/LED.png"); appbutton->move(500, 100); connect(appbutton, SIGNAL(pressed()), this, SLOT(button_pressed())); connect(appbutton, SIGNAL(released()), this, SLOT(button_released()));
总结
本篇文章就讲解到这里，我们已经迈出了第一步构建好了自己的APP图标了。
