用QT实现自定义样式按钮控件

标签：控件 QT 自定义 pushButton 30 start ui 按钮 资源

目录

一、资源准备

二、添加资源

1）创建资源文件

 2）添加图片资源

 三、设置按钮样式

1）定义QPixmap对象

2）设置按钮图标

3）图标切换

4）实际效果

四、总结

---

在用QT开发界面程序时，默认的按钮控件样式不美观。当需要构建自定义的按钮样式，使界面显示效果更加美观时，可以对QT提供的默认按钮控件进行样式修改。本文提供了一种基于QT默认按钮控件，实现自定义样式按钮的方法。

一、资源准备

根据设计需要，准备我们需要的按钮样式图片。此处以实现一个播放按钮为例，当点击按钮时，按钮显示样式在播放和暂停图标之间进行切换。按钮显示图片如下所示，图片是无边框的。

二、添加资源

1）创建资源文件

（1）在工程目录树中，选中工程，点击鼠标右键，选择“add new..."，在新建文件窗口中依次选择“Qt”，“Qt Resource File”,然后单击“Choose...”。如下图所示。

（2）上一步完成后，弹出如下窗口， 名称可以自行填写，路径保持当前工程的默认路径即可，然后单击下一步，在弹出的窗口中单击确定，完成资源文件的创建。这时我们在工程目录树中可以看到多了一级子目录，工程文件（.pro)中多了一段代码，如下图所示。

 

 2）添加图片资源

（1）在工程目录树中，选中资源文件“Resources.qrc”，单击右键弹出菜单，选择“Open in Editor”，在右侧界面中打开编辑器。

（2）如下图所示，在编辑器中可以看到已经添加了默认的前缀。通常我们不需要，在下方的编辑框中删除，输入自定义的前缀符号即可，此处我设置的前缀为“/images”。如果需要添加多个前缀，则点击“Add Prefix”。说明一下，此处设置的前缀就是后续在编写代码时所需要引用的资源路径。

 （3）设置好前缀后就可以添加图片资源了。在添加图片资源之前，为便于工程文件的管理，建议在工程目录文件路径下新建一个文件夹（此处新建了images文件夹），将我们所需要的两张图片拷贝到该文件夹（images）里面。如下图所示。

（4） 回到资源文件编辑界面，单击“Add Files”按钮，打开文件路径。找到上一步创建的文件路径，并同时选中路径中的播放和暂停图片，然后单击确定。在资源编辑窗口中可以看到图片资源已经添加到资源文件中，如下图所示。

（5） 保存资源文件。在推出资源文件编辑前，必须先保存，可以使用“ctrl+s”，或者在QT Creator的文件菜单中选择保存，否则上述操作将丢失。保存成功后，可以在工程目录树中看到已经添加好的资源，如下图所示。自此，我们可以在编写代码的过程中直接调用这些资源了。

 三、设置按钮样式

1）定义QPixmap对象

首先在UI对象的头文件中定义两个QPixmap对象，用于加载两张图片。在头文件中定义，是为了避免在使用图片资源时重复加载，减少代码量。然后在UI对象的构造函数中直接加载图片资源。注意加载的路径与前面创建的资源路径是一致的。

//在头文件中定义
QPixmap bfIm,ztIm;

//在构造函数中直接加载
bfIm.load(":/images/images/bofang.png");
ztIm.load(":/images/images/zanting.png");

2）设置按钮图标

此处为UI对象中的pushButton_start按钮设置图标，代码实现如下。该段代码可在构造函数中实现，按钮默认显示为播放图标，也可在其他需要的地方实现。该段代码首先限制了图标的大小，然后调用按钮的setIcon函数设置图标，并指定图标的大小，后面是一些点击效果的设置。

pushButton_start按钮控件的大小建议设置为与此处图片的大小一致（30,30），否则会影响显示效果。

    bfIm = bfIm.scaled(30,30,Qt::KeepAspectRatio, Qt::SmoothTransformation);
    ztIm = ztIm.scaled(30,30,Qt::KeepAspectRatio, Qt::SmoothTransformation);
    ui->pushButton_start->setIcon(QIcon(bfIm));//
    ui->pushButton_start->setIconSize(QSize(30,30));
    ui->pushButton_start->setFlat(true);//实现按钮透明
    ui->pushButton_start->setStyleSheet("border: 0px");//消除边框，取消点击效果

3）图标切换

当点击按钮时，切换显示的图标，在pushButton_start按钮的clicked()槽函数中添加如下代码实现。

void OrbitSimulate::on_pushButton_start_clicked()
{
    static bool start = false;
    if(start == false)
    {
        ui->pushButton_start->setIcon(QIcon(ztIm));
        ui->pushButton_start->setIconSize(QSize(30,30));
        ui->pushButton_start->setFlat(true);
        ui->pushButton_start->setStyleSheet("border: 0px");
        start = true;
    }
    else
    {
        ui->pushButton_start->setIcon(QIcon(bfIm));
        ui->pushButton_start->setIconSize(QSize(30,30));
        ui->pushButton_start->setFlat(true);
        ui->pushButton_start->setStyleSheet("border: 0px");
        start = false;
    }
}

4）实际效果

播放按钮实际演示效果如下。

<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="GymvfvHX-1736391870301" src="https://live.csdn.net/v/embed/442625"></iframe>

播放按钮效果演示

四、总结

本文提供了一种实现播放按钮的简单方法，过程实现代码是嵌入在UI工程中的，不是完全独立的。但利用该方法也可以通过继承QPushButton类来实现一个完全独立的自定义播放按钮控件。在项目中将所需要的图片添加到资源文件中是十分必要的，这样在编译过程中相关的图片资源会被一起打包，利于程序的发布运行。

标签：控件,QT,自定义,pushButton,30,start,ui,按钮,资源
From： https://blog.csdn.net/weixin_44232317/article/details/145023027