如何用Qt实现组件供QML使用

用Qt实现一个UI：一个圆形图标在圆圈内或圆圈上拖动，但不能拖出到圆圈外。当拖动到圆圈上时，高亮图标和圆圈。类似有RingLock。

1、继承QQuickPaintedItem类，该类为QQuickItem的子类。QQuickItem用于不用显示UI的供QML使用的组件；QQuickPaintedItem用于需要显示UI的供QML使用的组件。本案例中，需要画图，故而继承QQuickPaintedItem。

/*imagedragwidget.h*/

#ifndef IMAGEDRAGWIDGET_H

#define IMAGEDRAGWIDGET_H

#include <QQuickPaintedItem>

#include <QtCore>

#include <QtGui>

class imageDragWidget : public QQuickPaintedItem

{

Q_OBJECT

public:

explicit imageDragWidget(QQuickPaintedItem *parent = 0)

~imageDragWidget()

signals:

//鼠标按下

void dragPress()

//鼠标在圆圈内移动

void dragMoveIn()

//鼠标在圆圈上移动

void dragMoveOn()

//鼠标释放

void dragRelease()

//鼠标移出圆圈,确认关机

void dragOut()

public slots:

protected:

void paint(QPainter * painter)

void mouseMoveEvent(QMouseEvent *event)

void mousePressEvent(QMouseEvent *event)

void mouseReleaseEvent(QMouseEvent *event)

private:

//判断鼠标和圆圈的位置关系：圆圈外、圆圈上、圆圈内

int circleContain(void)

//判断鼠标和图标的位置关系：图标外、图标上、图标内

int powerContain(void)

//得到鼠标与圆心连线和圆圈的交点

QPoint GetPoint(QPoint currentPoint, QPoint circleCenter, int raduis)

private:

QPixmap *circle_defaultImg

QPixmap *circle_boldImg

QPixmap *power_haloImg

QPixmap *power_solidImg

QPixmap *power_defaultImg

//当前圆圈图片

QPixmap *circleImg

//圆圈图片所在矩形

QRect *circleImgRect

//当前图标图片

QPixmap *powerImg

//图标图片所在矩形

QRect *powerImgRect

//当前鼠标所在位置

QPoint currentMousePoint

//图标所在位置

QPoint powerCenterPoint

//鼠标是否按下的标志

bool pressFlag

//鼠标是否移出的标志

bool isOut

//宽度缩放比例

double widthScale

//高度缩放比例

double heightScale

}

#endif // IMAGEDRAGWIDGET_H

/*imagedragwidget.cpp*/

#include "imagedragwidget.h"

#include <QDebug>

imageDragWidget::imageDragWidget(QQuickPaintedItem *parent) :

QQuickPaintedItem(parent)

{

//得到屏幕尺寸

QScreen *screen = QGuiApplication::primaryScreen()

int screen_width = screen->size().width()

int screen_height = screen->size().height()

qDebug()<<"屏幕尺寸: "<<screen_width<<"*"<<screen_height

//圆圈所在图片尺寸为:452*452图标所在图片尺寸为:350*350

//滑动图标的尺寸128*128

double widgetScale = (double)580/(double)720

qDebug()<<"控件占屏幕比例: "<<widgetScale

//设置控件尺寸

setContentsSize(QSize(screen_width*widgetScale, screen_width*widgetScale))

int widget_width = contentsSize().width()

int widget_height = contentsSize().height()

qDebug()<<"控件尺寸: "<<widget_width<<"*"<<widget_height

//接收鼠标左键

setAcceptedMouseButtons(Qt::LeftButton)

circle_defaultImg = new QPixmap(":/images/circle_default.png")

circle_boldImg = new QPixmap(":/images/circle_bold.png")

power_haloImg = new QPixmap(":/images/power_halo.png")

power_solidImg = new QPixmap(":/images/power_solid.png")

power_defaultImg = new QPixmap(":/images/power_default.png")

isOut = false

circleImg = circle_defaultImg

int circle_width = circleImg->width()

int circle_height = circleImg->height()

//设置圆圈图片在实际屏幕上的尺寸

//滑动图标的尺寸128*128

int circle_width_in_widget = widget_width - 128*widgetScale

int circle_height_in_widget = widget_height - 128*widgetScale

qDebug()<<"滑动圆圈尺寸: "<<circle_width_in_widget<<"*"<<circle_height_in_widget

widthScale = (double)circle_width_in_widget/(double)circle_width

heightScale = (double)circle_height_in_widget/(double)circle_height

qDebug()<<"圆圈和图标宽度缩放比例为: "<<widthScale<<"高度缩放比例为: "<<heightScale

circleImgRect = new QRect(0, 0, circle_width*widthScale, circle_height*heightScale)

//圆圈图片移到控件中心

circleImgRect->moveCenter(QPoint(widget_width/2, widget_height/2))

powerImg = power_defaultImg

int power_width = powerImg->width()

int power_height = powerImg->height()

powerImgRect = new QRect(0, 0, power_width*widthScale, power_height*heightScale)

//图标图片移到控件中心

powerImgRect->moveCenter(circleImgRect->center())

powerCenterPoint = circleImgRect->center()

}

void imageDragWidget::paint(QPainter *painter)

{

painter->drawPixmap(*circleImgRect, *circleImg)

painter->drawPixmap(*powerImgRect, *powerImg)

}

void imageDragWidget::mouseMoveEvent(QMouseEvent *event)

{

if(pressFlag) {

//鼠标已按下

int power_width = powerImgRect->width()

int power_height = powerImgRect->height()

int circle_width = circleImgRect->width()

int circle_height = circleImgRect->height()

currentMousePoint = event->pos()

int flag = circleContain()

if(flag <0) {

//鼠标在圆圈内，则图标移动到鼠标位置

powerImg = power_haloImg

circleImg = circle_defaultImg

powerImgRect->moveCenter(currentMousePoint)

powerCenterPoint = currentMousePoint

isOut = false

} else if(flag == 0) {

//鼠标在圆圈上，则图标移动到鼠标位置，同时更换图片

powerImg = power_solidImg

circleImg = circle_boldImg

powerImgRect->moveCenter(currentMousePoint)

powerCenterPoint = currentMousePoint

isOut = true

} else {

//鼠标在圆圈外

isOut = true

if(powerContain() >0) {

//鼠标在圆圈外且在图标外，则等同于鼠标释放。图标回到控件中心。

powerImg = power_defaultImg

powerImgRect->moveCenter(circleImgRect->center())

pressFlag = false

circleImg = circle_defaultImg

} else {

//鼠标在圆圈外且不在图标外，则图标移到鼠标与控件中心连线和圆圈的交点。

powerImg = power_solidImg

circleImg = circle_boldImg

powerCenterPoint = GetPoint(currentMousePoint,

circleImgRect->center(), circleImgRect->width()/2)

powerImgRect->moveCenter(powerCenterPoint)

}

}

powerImgRect->setHeight(power_height)

powerImgRect->setWidth(power_width)

circleImgRect->setHeight(circle_height)

circleImgRect->setWidth(circle_width)

update()

if(pressFlag&&(!isOut)) {

//鼠标按下且在圆圈内

emit dragMoveIn()

} else if(pressFlag&&isOut){

//鼠标按下且在圆圈上

emit dragMoveOn()

} else if((!pressFlag)&&(isOut)){

//鼠标在圆圈外且在图标外，则等同于鼠标释放。

emit dragRelease()

}

if(isOut&&(!pressFlag)) {

//鼠标在圆圈外且在图标外，确认关机。

emit dragOut()

}

}

}

void imageDragWidget::mousePressEvent(QMouseEvent *event)

{

currentMousePoint = event->pos()

if(powerContain() <= 0) {

//鼠标进入到图标内，则表示按下

pressFlag = true

int power_width = powerImgRect->width()

int power_height = powerImgRect->height()

powerImg = power_haloImg

powerImgRect->setHeight(power_height)

powerImgRect->setWidth(power_width)

update()

emit dragPress()

}

}

目前自定义窗体涉及到的几种效果

首先我们来看看QtQuick默认窗体在Windows10上的表现

可以看出来 贴近桌面边缘时的效果, 这是windows10的系统特性, 并不是QtQuick的效果.

然后我们自定义窗体一般会选择自定义标题栏, 我们去掉标题栏 再试试

然后默认的窗体效果没有了....

为此如果要保持自定义风格和窗体的系统特性, 只能开发了.

首先, 拖放到桌面边界 鼠标出现波纹放大的效果

看样子还是可以了 桌面顶部和左侧也是同样的效果

然后再加上窗体位置的设置

基本上还是达到效果了

然后下面进入自定义的各个环节

首先是标题栏的logo图标 标题 这个两个都比较好现实

然后窗体的最小化, 最大化, 以及关闭按钮, 这些可以用一个Row 加上自定义按钮就搞定了

然后可以增加窗体的阴影效果

这个可以使用QtGraphicalEffects图形特效中的DropShadow

接下来我们看看圆角效果

然后我们自由拉伸的功能

首先 我们规划处鼠标可拉伸的区域出来, 这个是可以设置的

然后当鼠标进入对应的区域时 改变鼠标显示状态

最后我们看看异形窗体

这块同样使用QtGraphicalEffects图形特效中的OpacityMask

访问三峰驼Qml控件大全

<img src="https://github.com/zhengtianzuo/zhengtianzuo.github.io/blob/master/weixin.jpg?raw=true" width="30%" height="30%" /> <img src="https://github.com/zhengtianzuo/zhengtianzuo.github.io/blob/master/zhifubao.jpg?raw=true" width="30%" height="30%" />

所谓换肤，就是改变页面中颜色值，使页面呈现出不同的色彩效果。

首先，将UCD提供的所有颜色值收集到一起，语义化定义到文件中，如下面的UIConfig.qml

其中，默认颜色定义在ctrlColor中，天蓝色主题定义在ctrlColorBlue中，海蓝色主题定义在ctrlColorSeaBlue中，这三个变量的内部结构都是一模一样的，颜色的定义最好语义化的定义在ctrlColor中，便于维护。不同主题除了颜色值不同以外，有时图标也会不一样，所以还收集了图标，分类定义在ctrlIcon中。ctrlColorDefault和ctrlIconDefault用来切换不同主题，初始化时将其赋值为默认主题颜色和图标。当主导航栏上换肤按钮触发主题currentTheme切换时，则ctrlColorDefault和ctrlIconDefault根据主题重新赋值。

接下来，介绍如何使用这些颜色值。在主页面声明：

在需要用到颜色值或图标的控件中直接引用即可，如：

property color normalTextColor: gUIConfig.ctrlColor.commonBtn.font.nor

Rectangle {

          id: rec

          height: 30

          width: 260

          border.width: 1

          border.color: gUIConfig.ctrlColor.conditionRec.border.nor

}

这样就完成了一键换肤的功能。

---