您现在的位置是:首页 > 技术文章网站首页技术文章

[Qt]自定义带图标下划线按钮01

  • WangYe
  • 2020-11-24 13:55:42
  • 454 次阅读
自定义图标和下划线按钮;

效果图:

图片.png


stdafx.h

#include <QtWidgets>
#include <QtGui>

using namespace std;


Custom_control.h (主界面)

#pragma once

#include "stdafx.h"
#include <QtWidgets/QMainWindow>

#include "Icon_button.h"

class Custom_control : public QWidget
{
    Q_OBJECT

public:
    Custom_control(QWidget *parent = Q_NULLPTR);
    ~Custom_control();

protected:
    void InitUi();

private slots:
    void slot_test01();
    void slot_test02();

private:
    QVBoxLayout* m_pThisLayout; //创建底部布局
    QWidget* m_pThisWidget; //创建底部控件
    Icon_button* m_TestButton01;  //创建自定义按钮01
    Icon_button* m_TestButton02;    //创建自定义按钮02

    CIconButtonPix* m_TestButton03; //创建自定义按钮03
};


Custom_control.cpp (主界面)

#include "Custom_control.h"

Custom_control::Custom_control(QWidget *parent)
    : QWidget(parent)
{
    InitUi();
}

Custom_control::~Custom_control()
{
}

void Custom_control::InitUi()
{
    setMinimumSize(500,500);

    m_pThisLayout = new QVBoxLayout(this);  //创建底部布局
    //m_pThisLayout->setContentsMargins(0, 0, 0, 0);    //设置左侧、顶部、右侧和底部边距
    //m_pThisLayout->setSpacing(5);    //设置各个控件之间的上下间距
    //m_pThisLayout->setMargin(0);    //设置控件与窗体左右边距
    //m_pThisLayout->addStretch(0);    //增加伸缩量

    m_pThisWidget = new QWidget(this);  //创建底部控件
    m_pThisWidget->setContentsMargins(0, 0, 0, 0);  //设置上下左右间距
    m_pThisLayout->addWidget(m_pThisWidget);    //添加底部控件到布局

    m_TestButton01 = new Icon_button(m_pThisWidget);  //创建自定义按钮01
    m_TestButton01->Button()->setText("Test01");  //设置按钮文本
    connect(m_TestButton01, SIGNAL(clicked()), this, SLOT(slot_test01()));
    m_pThisLayout->addWidget(m_TestButton01,0,Qt::AlignHCenter); //添加按钮到布局

    m_TestButton02 = new Icon_button(m_pThisWidget);    //创建自定义按钮02
    m_TestButton02->Button()->setText("Test02");    //设置按钮文本
    m_TestButton02->setIconPath(":/Img/resources/Img/stars_24px.png");
    connect(m_TestButton02, SIGNAL(clicked()), this, SLOT(slot_test02()));
    m_pThisLayout->addWidget(m_TestButton02,0,Qt::AlignHCenter);

    m_pThisLayout->addStretch(1);   //添加拉伸
}

void Custom_control::slot_test01()  //按钮01点击处理
{
    qDebug() << "Hello Dark~";
}

void Custom_control::slot_test02()  //按钮02点击处理
{
    qDebug() << "Hello World~";
}


Icon_button.h (自定义按钮控件)

#pragma once

#include "stdafx.h"
#include <QWidget>

class Icon_button : public QWidget
{
    Q_OBJECT
public:
    explicit Icon_button(QWidget *parent = nullptr);
    ~Icon_button();

    QPushButton* Button(void);    //设置按钮文本
    void setIconPath(QString str);    //设置Icon路径
protected:
    void InitUi();    //初始化界面
    void InitProperty();    //加载样式
    void SetStateWidgetState(QString state);    //设置自定义状态属性
    void setSetState(bool state);    //状态
    void enterEvent(QEvent*);    //点击事件
    void leaveEvent(QEvent*);    //离开事件
signals:
    void clicked();    //按钮点击信号

private:
    QVBoxLayout* m_pThisLayout;    //整体布局
    QWidget* m_pRootWidget;    //底层控件
    QVBoxLayout* m_pRootLayout;    //底层控件布局
    QHBoxLayout* m_pIconLayout;    //图标布局
    QLabel* m_pIconLabel;    //图标
    QString IconPath;    //图标路径
    QPushButton* m_pButton;    //按钮
    QHBoxLayout* m_pStatelayout;    //按钮状态下划线布局
    QWidget* m_pStateWidget;    //按钮状态控件

    bool m_bSetState;    //状态标识
};


Icon_button.cpp (自定义按钮控件)

#include "Icon_button.h"

Icon_button::Icon_button(QWidget* parent)
    :QWidget(parent), m_bSetState(true)
{
    InitUi();    //初始化界面
    InitProperty();    //加载样式
}

Icon_button::~Icon_button()
{
}

void Icon_button::InitUi()    //初始化UI
{
    m_pThisLayout = new QVBoxLayout(this);    //创建整体布局
    m_pThisLayout->setContentsMargins(0, 0, 0, 0);    //设置上下左右边距
    m_pThisLayout->setSpacing(0);    //设置上下边距

    m_pRootWidget = new QWidget(this);    //创建底层控件
    m_pRootWidget->setObjectName("RootWidget");
    m_pThisLayout->addWidget(m_pRootWidget);

    m_pRootLayout = new QVBoxLayout(m_pRootWidget);    //创建底层布局
    m_pRootLayout->setContentsMargins(0, 0, 0, 0);    //设置上下左右边距
    m_pRootLayout->setSpacing(0);    //设置上下边距

    m_pIconLayout = new QHBoxLayout(m_pRootWidget);    //创建图标布局
    m_pIconLayout->setContentsMargins(5, 0, 5, 0);    //设置左右上下边距

    m_pIconLabel = new QLabel(m_pRootWidget);    //创建图标
    m_pIconLayout->addWidget(m_pIconLabel);

    m_pButton = new QPushButton(m_pRootWidget);    //创建按钮
    m_pButton->setObjectName("Button");    //设置按钮名称
    m_pIconLayout->addWidget(m_pButton);    //添加按钮进底层控件

    m_pStatelayout = new QHBoxLayout();    //创建下划线布局
    m_pStatelayout->setContentsMargins(0, 0, 0, 0);
    m_pStatelayout->setSpacing(0);

    m_pStateWidget = new QWidget(m_pRootWidget);    //创建下划线控件
    m_pStateWidget->setObjectName("StateWidget");    //设置下划线控件名称
    m_pStatelayout->addWidget(m_pStateWidget);
    m_pStatelayout->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);    //设置水平和垂直居中

    m_pRootLayout->addLayout(m_pIconLayout);
    m_pRootLayout->addLayout(m_pStatelayout);    //把下划线布局添加到底层布局
}

void Icon_button::InitProperty()    //加载样式
{
    this->setWindowFlags(Qt::FramelessWindowHint);    //取消标题栏
    setAutoFillBackground(true);    //设置窗体自动填充背景
    QPalette pal = palette();    //创建调色板
    pal.setColor(QPalette::Background, Qt::transparent);    //设置背景透明
    setPalette(pal);    //设置调色板

    QFile resourceqss(":/Css/resources/IconButton.css");    //资源文件
    resourceqss.open(QFile::ReadOnly);    //资源打开读取
    this->setStyleSheet(resourceqss.readAll());    //设置读取资源样式
    resourceqss.close();    //关闭资源

    connect(m_pButton, &QPushButton::clicked, this, [=]() {
        emit clicked();
    });
}

void Icon_button::SetStateWidgetState(QString state)    //设置自定义状态属性
{
    m_pStateWidget->setProperty("State", state);    //设置状态属性
    m_pStateWidget->setStyle(QApplication::style());    //这句必须加上,否则样式设置失败
}

void Icon_button::setSetState(bool state)    //设置状态
{
    m_bSetState = state;
}

void Icon_button::enterEvent(QEvent*)    //点击事件
{
    if (m_bSetState)
    {
        SetStateWidgetState("enter");
    }
}

void Icon_button::leaveEvent(QEvent*)    //离开事件
{
    if (m_bSetState)
    {
        SetStateWidgetState("leave");
    }
}

QPushButton* Icon_button::Button(void)    //设置按钮文本
{
    return m_pButton;
}

void Icon_button::setIconPath(QString str)    //设置Icon路径
{
    IconPath = str;
    QPixmap icon01(IconPath);
    icon01 = icon01.scaled(24, 24);
    m_pIconLabel->setPixmap(icon01);
}


IconButton.css (自定义按钮样式)

QWidget#RootWidget { /*底层背景样式*/
    min-height: 40px;
    max-height: 40px;
    min-width: 78px;
    max-width: 78px;
    background: #F4F7FF;
}

QPushButton#Button {    /*按钮样式*/
    min-height: 34px;
    max-height: 34px;
    text-align: center;
    font-size: 12px;
    font-family: MicrosoftYaHei;
    background-color: transparent;
    color: #333333;
}

QWidget#StateWidget {   /*下划线样式*/
    min-width: 30px;
    min-height: 3px;
}

QWidget#StateWidget[State="enter"] {    /*下标线状态*/
    min-width: 30px;
    min-height: 3px;
    background-color: #2F54EB;
}

QWidget#StateWidget[State="leave"] {    /*下标线状态*/
    min-width: 30px;
    min-height: 3px;
    background-color: transparent;
}


文章评论 (0)



Top