qml-自定义quick模块

将自己写的可通用的qml组件打包成dll文件，供其他项目使用。通过生成qmltypes文件实现在qt creator中正常识别，能够自动补全。项目不需要任何多余 *** 作，直接import即可使用。

https://github.com/loveCatCoder/ZNModule/tree/master

按照如图所示设置新建项目，自定义项目名和保存路径。

在项目中编写自定义组件，将组件的qml文件包含在qrc文件中。在插件类的registerTypes成员函数中注册自定义组件。如下图：

构建项目，找到生成的dll,lib,qmldir,尽量在release模式下构建

自己找一个地方新建一个文件夹，文件夹名字和qml模块名一致。如ZNModule，将上面的dll,lib,qmldir文件拷贝到ZNModule文件夹中。修改qmldir如下：

将ZNModule文件夹复制到qt安装目录中对应编译器的qml文件夹中，即可在qt creator正常使用，可以自动补全，不会有波浪线。我的目标路径如下，编译器要选对。

toou2d组件库

https://github.com/ShowFL/Toou-2D

涛哥博客

https://jaredtao.github.io/2019/06/01/Qml%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A8%8B10-%E8%87%AA%E5%AE%9A%E4%B9%89Quick%E6%A8%A1%E5%9D%97/

首先我们看看官方提供的QtQuick.Controls 2.x Tooltip Tooltip

效果是怎么样的

看起来还是挺好用的 也很方便 然后我们再看来看看特殊的情况

我们将窗体大小缩小后

很明显 Tooltip的文字描述长度超过窗体右边边界时 无法正常显示了.

我们在看看边界的情况

正常关闭按钮的Tooltip:

上面两个问题的原因很简单, Tooltip继承于Popup, 不属于独立窗体.

为此我决定自定义开发一个QtQuick方式的Tooltip

首先Tooltip应该是基于独立窗体的, 并且因为要考虑资源占用问题, 所以最好是单例模式, 就是说始终只存在一个ToolTip的实例.

ToolTip有两大重要属性, 一是延时启动, 二是延时消失, 这两个当然是需要可设置的

同样, SilkQmlToolTip也需要有同样的功能

结果是预期的: 1秒显示 5秒隐藏 当然鼠标移开也是立即隐藏的

我们又在三峰驼演示程序里看看效果

关闭按钮的ToolTip可以在窗体外正常显示

三峰驼演示程序里的效果也是正常.

访问三峰驼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%" />

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

首先我们来看看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%" />

---