QT 语言学习 day07 ui 界面三种样式的按钮开关的制作！

1.定义一个按钮类 : class ImageSwitch

首先我们需要定义它的成员函数：

1. 按钮的样式 enum ButtonStyle （枚举来定义）公有的定义给私有成员使用

2.我们需要重写它的绘画功能 : void paintEvent(QPaintEvent *event);//重写绘画的功能

3.我们需要重写它的鼠标按下的功能 void mousePressEvent(QMouseEvent *);//重写鼠标按下事件

4.我们需要定义一些私有成员：

按键的现在的状态是开启还是关闭: bool isChecked

它自己的样式： ButtonStyle buttonStyle;

按键关闭的图片 :QString imgOffFile;

按键打开的图片:QString imgOnFile;

现在展示的图片是那张:QString imgFile;

5.因为是私有成员，所以我们需要设置公有的函数来访问私有成员

//设置按键是否开启 void setChecked(bool isChecked);

//设置按钮样式 void setButtonStyle(const ImageSwitch::ButtonStyle &buttonStyle);

6.信号函数：传输按钮的状态！

void checkedChanged(bool checked);// 传输现在的按钮的状态（鼠标点击之后）

2.ui->设计界面

还需要，把widget 继承按钮类 ImageSwitch

(点击 widget 右键 -- 》点击提升为 )

3.资源文件的加载(按键的三种样式)

image (放到资源里面了，自己下载！！)！！

4.所有的代码：

imageswitch.h

#ifndef IMAGESWITCH_H
#define IMAGESWITCH_H#include <QWidget>//QT使用以下两个宏来实现符号（函数或全局变量/对象）的导出和导入（跨平台不能用def文件了）：
//Q_DECL_EXPORT   // 必须添加到符号声明中（共享库项目）
//Q_DECL_IMPORT   // 必须添加到符号声明中（使用共享库的客户项目）
//QT使用 QLibrary 类实现共享库的动态加载，即在运行时决定加载那个DLL程序，插件机制使用#ifdef quc
class Q_DECL_EXPORT ImageSwitch : public QWidget
#else
class ImageSwitch : public QWidget
#endif{Q_OBJECTQ_ENUMS(ButtonStyle)Q_PROPERTY(bool isChecked READ getChecked WRITE setChecked)Q_PROPERTY(ButtonStyle buttonStyle READ getButtonStyle WRITE setButtonStyle)public:enum ButtonStyle {ButtonStyle_1 = 0,  //开关样式1ButtonStyle_2 = 1,  //开关样式2ButtonStyle_3 = 2   //开关样式3};explicit ImageSwitch(QWidget *parent = 0);protected:void mousePressEvent(QMouseEvent *);//重写鼠标按下事件void paintEvent(QPaintEvent *event);//重写绘画的功能private:bool isChecked;//表示状态  按钮的状态ButtonStyle buttonStyle;QString imgOffFile;//按键关闭的图片QString imgOnFile;//按键打开的图片QString imgFile;//现在展示的图片是那张public:bool getChecked()               const;//访问私有成员  isCheckedButtonStyle getButtonStyle()    const;//访问私有成员  buttonStyle;QSize sizeHint()                const;//QSize minimumSizeHint()         const;//public Q_SLOTS://槽函数//设置是否选中void setChecked(bool isChecked);//设置按钮样式void setButtonStyle(const ImageSwitch::ButtonStyle &buttonStyle);Q_SIGNALS:void checkedChanged(bool checked);// 传输现在的按钮的状态
};#endif // IMAGESWITCH_H

widget.h

#ifndef WIDGET_H
#define WIDGET_H#include <QWidget>namespace Ui {
class Widget;
}class Widget : public QWidget
{Q_OBJECTpublic:explicit Widget(QWidget *parent = 0);~Widget();private:Ui::Widget *ui;private slots:void initForm();void checkedChanged(bool checked);};#endif // WIDGET_H

imageswitch.cpp

#pragma execution_character_set("utf-8")#include "imageswitch.h"
#include "qpainter.h"
#include "qdebug.h"ImageSwitch::ImageSwitch(QWidget *parent) : QWidget(parent)//构造函数
{isChecked = false;//开始的时候默认按钮的状态为  关闭buttonStyle = ButtonStyle_2;//默认按钮的样式为 样式2imgOffFile = ":/image/imageswitch/btncheckoff2.png";  //开始默认 按钮关闭状态的图片  为 样式2 的图片imgOnFile = ":/image/imageswitch/btncheckon2.png";    //开始默认 按钮开启状态的图片 为  样式2 的图片imgFile = imgOffFile;
}void ImageSwitch::mousePressEvent(QMouseEvent *)//重写鼠标按下的事件
{imgFile = isChecked ? imgOffFile : imgOnFile; //判断语句  三目运算符    假如是开启状态将变成关闭状态     关闭状态变成开启状态  (鼠标按下改变状态)isChecked = !isChecked;//赋值  把按键的状态改变    变成现在的状态emit checkedChanged(isChecked);//发出信号    激发函数this->update();//更新窗口
}//paintEvent函数执行时间：
//1、在构建窗体的时候执行
//2、在窗体update的时候执行
//3、系统认为窗口需要重新绘制的时候执行void ImageSwitch::paintEvent(QPaintEvent *)//重写绘画的功能
{QPainter painter(this);//定义一个画家类  选择父亲painter.setRenderHints(QPainter::SmoothPixmapTransform);//QPainter::SmoothPixmapTransform：使用平滑的pixmap变换算法（双线性插值算法QImage img(imgFile);//顶一个图片的对象，加载图片img = img.scaled(this->size(), Qt::KeepAspectRatio, Qt::SmoothTransformation);//,Qt::KeepAspectRatio是在给定的矩形中保持长宽比,  第一个参数是图片的大小//按照比例自动居中绘制int pixX = rect().center().x() - img.width() / 2;//图片居中int pixY = rect().center().y() - img.height() / 2;//图片居中QPoint point(pixX, pixY);//定义一个点 ,这个点的是图片的开始放置的顶点  左上角painter.drawImage(point, img);//窗口放置图片
}bool ImageSwitch::getChecked() const  //获取私有成员 isChecked 的值
{return isChecked;
}// (解释这个成员函数的 类外定义)
//首先 ButtonStyle  这个枚举在类里面  所以  需要用到ImageSwitch::ButtonStyle
//然后才是  类里面的成员  定义  加类的名字
ImageSwitch::ButtonStyle ImageSwitch::getButtonStyle() const  //获取  私有成员  buttonStyle  的值
{return this->buttonStyle;
}//QSize 类代表一个矩形区域的大小，实现在 QtCore 共享库中。它可以认为是由一个整型的宽度和整型的高度组合而成的。
QSize ImageSwitch::sizeHint() const//返回一个矩形区域的大小
{return QSize(87, 28);//宽87  长28
}QSize ImageSwitch::minimumSizeHint() const
{return QSize(87, 28);
}void ImageSwitch::setChecked(bool isChecked)//设置按键的状态  并且实时更新窗口的图片
{if (this->isChecked != isChecked) {//假如现在按钮的状态 和参数的状态不同  就改变现在状态  变为参数的状态this->isChecked = isChecked;imgFile = isChecked ? imgOnFile : imgOffFile;//图片的确定this->update();//更新窗口}
}void ImageSwitch::setButtonStyle(const ImageSwitch::ButtonStyle &buttonStyle)//设置样式
{if (this->buttonStyle != buttonStyle) {this->buttonStyle = buttonStyle;if (buttonStyle == ButtonStyle_1) {imgOffFile = ":/image/imageswitch/btncheckoff1.png";imgOnFile = ":/image/imageswitch/btncheckon1.png";this->resize(87, 28);} else if (buttonStyle == ButtonStyle_2) {imgOffFile = ":/image/imageswitch/btncheckoff2.png";imgOnFile = ":/image/imageswitch/btncheckon2.png";this->resize(87, 28);} else if (buttonStyle == ButtonStyle_3) {imgOffFile = ":/image/imageswitch/btncheckoff3.png";imgOnFile = ":/image/imageswitch/btncheckon3.png";this->resize(96, 38);}imgFile = isChecked ? imgOnFile : imgOffFile;setChecked(isChecked);this->update();updateGeometry();//用于告知包含该widget的layout：该widget的size hint已发生变化，layout会自动进行调整。}
}

main.cpp

#include "widget.h"
#include <QApplication>int main(int argc, char *argv[])
{QApplication a(argc, argv);Widget w;w.show();return a.exec();
}

widget.cpp

#include "widget.h"
#include "ui_widget.h"
#include <QDebug>
#include "imageswitch.h"Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget)
{ui->setupUi(this);this->initForm();
}Widget::~Widget()
{delete ui;
}void Widget::initForm()
{ui->imageSwitch1->setChecked(true);//设置开始的状态ui->imageSwitch2->setChecked(true);ui->imageSwitch3->setChecked(true);ui->imageSwitch1->setFixedSize(87, 30);//设置widget 的大小ui->imageSwitch2->setFixedSize(87, 30);ui->imageSwitch3->setFixedSize(87, 30);ui->imageSwitch1->setButtonStyle(ImageSwitch::ButtonStyle_1);//设置按钮的样式ui->imageSwitch2->setButtonStyle(ImageSwitch::ButtonStyle_2);ui->imageSwitch3->setButtonStyle(ImageSwitch::ButtonStyle_3);//两种写法
//    //绑定选中切换信号
//QT4 版本之后的写法！！
//    connect(ui->imageSwitch1, SIGNAL(checkedChanged(bool)), this, SLOT(checkedChanged(bool)));
//    connect(ui->imageSwitch2, SIGNAL(checkedChanged(bool)), this, SLOT(checkedChanged(bool)));
//    connect(ui->imageSwitch3, SIGNAL(checkedChanged(bool)), this, SLOT(checkedChanged(bool)));void(ImageSwitch:: * anniu)(bool)=&ImageSwitch::checkedChanged;void(Widget:: * jieshou)(bool)=&Widget::checkedChanged;connect(ui->imageSwitch1,anniu,this,jieshou);connect(ui->imageSwitch2,anniu,this,jieshou);connect(ui->imageSwitch3,anniu,this,jieshou);}void Widget::checkedChanged(bool checked)
{qDebug() << sender() << checked;
}

QT 语言学习 day07 ui 界面三种样式的按钮开关的制作！相关推荐

Python Qt GUI设计：UI界面可视化组件、属性概述（基础篇—4）
目录 1.界面组件 1.1.布局组件(Layouts) 1.2.分隔组件(Spacers) 1.3.按钮组件(Buttons) 1.4.表项视图(Item Views) 1.5.表项组件(Item W ...
如何使用深度学习识别 UI 界面组件？
导读:智能生成代码平台 imgcook 以 Sketch.PSD.静态图片等形式的视觉稿作为输入,可以一键生成可维护的前端代码,但从设计稿中获取的都是 div.img.span 等元件,而前端大多是组 ...
Python语言学习：基于python五种方法实现使用某函数名【func_01】的字符串格式('func_01')来调用该函数【func_01】执行功能
Python语言学习:基于python五种方法实现使用某函数名[func_01]的字符串格式('func_01')来调用该函数[func_01]执行功能目录问题提出代码五种设计思路 T1方法:e ...
c语言数组最大可定义多少位_C语言求数组的最大值三种方法
/* 黄哥Python培训黄哥所写*/#include int maxValue(int* arr, int n);int maxRecursionValue(int* arr, int n);in ...
CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级
从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style=" ...
CSS三种样式表：行内样式表、内部样式表、外部样式表
目录一.CSS三种样式表 1.内部样式表 2.行内式(内联样式) 3.外部样式表(外链式) 二.三种样式表的对比三.CSS样式表规则一.CSS三种样式表 1.内部样式表 2.行内样式表(内联式) ...
CSS三种样式表内部样式表、行内部样式表、外部引用
目录 CSS三种样式表 1.内部样式表 2.行内部样式表 3.外部引用: CSS三种样式表 1.内部样式表 2.行内样式表(内联式) 3.外部样式表(外链式) 1.内部样式表内嵌式:将CSS代码集中 ...
CSS三种样式表（内部样式表、行内样式表、外部样式表）
引入CSS样式表(书写位置) CSS可以写到那个位置? 是不是一定写到html文件里面呢? 内部样式表(内嵌式) 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义 ...
HTML引入css样式的三种方式，css选择器的三种样式
文章目录前言一. css样式的三种方式第一种:内联定义方式第二种: 样式块第三种:引入外部独立css文件二. 选择器的三种样式第一种:id选择器第二种:标签选择器第三种:类选择器三 ...

QT 语言学习 day07 ui 界面三种样式的按钮开关的制作！

QT 语言学习 day07 ui 界面三种样式的按钮开关的制作！相关推荐

最新文章

热门文章

QT 语言学习 day07 ui 界面 三种样式的按钮开关的制作！

QT 语言学习 day07 ui 界面 三种样式的按钮开关的制作！相关推荐

最新文章

热门文章

QT 语言学习 day07 ui 界面三种样式的按钮开关的制作！

QT 语言学习 day07 ui 界面三种样式的按钮开关的制作！相关推荐