QtQuick/Qml自定义控件(3)-自定义对话框 [复制链接]

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

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

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


然后默认的窗体效果没有了…. 为此如果要保持自定义风格和窗体的系统特性, 只能开发了.
首先, 拖放到桌面边界 鼠标出现波纹放大的效果
看样子还是可以了 桌面顶部和左侧也是同样的效果 然后再加上窗体位置的设置

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


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

接下来我们看看圆角效果

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

然后当鼠标进入对应的区域时 改变鼠标显示状态
最后我们看看异形窗体 这块同样使用QtGraphicalEffects图形特效中的OpacityMask



访问三峰驼Qml控件大全


仅此文章的功能


联系方式:

  

---

|作者|郑天佐| |---|--- |QQ|278969898 |主页|http://www.camelstudio.cn/ |邮箱|camelsoft@163.com |博客|http://blog.csdn.net/zhengtianzuo06/ |github|https://github.com/zhengtianzuo |QQ群|199672080
  

---

捐赠




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

嗯，思路很好，我感觉widget也可以做下这个效果！

想请教下你的丝绸聊天软件中，聊天框是用什么技术实现的？看网上都说用webengine。qtextbrowser对css，html支持又不完善。

liudianwu:嗯，思路很好，我感觉widget也可以做下这个效果！[表情] [表情] [表情]  (2019-04-19 08:21) 

Widget那是妥妥的 还有蛮多效果都还没有来得及加的 后续持续更新吧

listen342325:想请教下你的丝绸聊天软件中，聊天框是用什么技术实现的？看网上都说用webengine。qtextbrowser对css，html支持又不完善。 (2019-04-19 10:16) 

我是用webengine实现的 性能和效果以及对h5的支持力度甩webkit好几条街

郑总，发布频率很快！

305750665:郑总，发布频率很快！[表情] [表情] [表情]  (2019-04-19 14:02) 

还行 有些是现成的技术 等着集成呢~