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

  1. 靠边停放
  2. 自定义标题栏
  3. 阴影效果
  4. 圆角效果
  5. 拉伸大小
  6. 异形窗体

首先我们来看看QtQuick默认窗体在Windows10上的表现
QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

可以看出来 贴近桌面边缘时的效果, 这是windows10的系统特性, 并不是QtQuick的效果.
然后我们自定义窗体一般会选择自定义标题栏, 我们去掉标题栏 再试试

QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

然后默认的窗体效果没有了…
为此如果要保持自定义风格和窗体的系统特性, 只能开发了.

首先, 拖放到桌面边界 鼠标出现波纹放大的效果
QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

看样子还是可以了 桌面顶部和左侧也是同样的效果
然后再加上窗体位置的设置

QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

基本上还是达到效果了

然后下面进入自定义的各个环节
首先是标题栏的logo图标 标题 这个两个都比较好现实
然后窗体的最小化, 最大化, 以及关闭按钮, 这些可以用一个Row 加上自定义按钮就搞定了

QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

然后可以增加窗体的阴影效果
这个可以使用QtGraphicalEffects图形特效中的DropShadow

QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

接下来我们看看圆角效果

QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

然后我们自由拉伸的功能

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

QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

然后当鼠标进入对应的区域时 改变鼠标显示状态
QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

最后我们看看异形窗体
这块同样使用QtGraphicalEffects图形特效中的OpacityMask

QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框 仅此文章的功能 QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

联系方式:


作者 郑天佐
QQ 278969898
主页 http://www.camelstudio.cn/
邮箱 [email protected]
博客 http://blog.csdn.net/zhengtianzuo06/
github https://github.com/zhengtianzuo
QQ群 199672080

捐赠

QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框QtQuick/Qml自定义控件开发系列教程(3)-自定义对话框

觉得分享的内容还不错, 就请作者喝杯咖啡吧~~

相关文章: