发帖 回复
返回列表
  • 3369阅读
  • 3回复

Qml组件化编程2-可拖动组件和定制窗体 [复制链接]

 上一主题 下一主题
离线dd759378563
新手上路
 
只看楼主 正序阅读 楼主  发表于: 2019-05-11

简介

本文是《Qml组件化编程》系列文章的第二篇，涛哥将教大家，如何在Qml中实现可拖动组件，通过拖动
改变组件的大小和位置；以及实现定制窗体（无边框和标题栏）, 并把拖动组件应用在顶层窗体。
文章主要发布在涛哥的博客 和 知乎专栏-涛哥的Qt进阶之路。

拖动组件



拖动改变坐标

拖动改变坐标的原理很简单，鼠标移动的时候改变目标Item的坐标即可。
说话的功夫，涛哥就造了个轮子出来
(其实是太常用了，涛哥已经写了很多遍)
复制代码
  1. import QtQuick 2.9
  2. import QtQuick.Controls 2.5
  3. Item {
  4.     width: 800
  5.     height: 600
  7.     Rectangle {
  8.         id: moveItem
  10.         //注意拖动目标不要使用锚布局或者Layout，而是使用相对坐标
  11.         x: 100
  12.         y: 100
  13.         width: 300
  14.         height: 200
  16.         color: "lightblue"
  17.         MouseArea {
  18.             anchors.fill: parent
  19.             property real lastX: 0
  20.             property real lastY: 0
  21.             onPressed: {
  22.                 //鼠标按下时，记录鼠标初始位置
  23.                 lastX = mouseX
  24.                 lastY = mouseY
  25.             }
  26.             onPositionChanged: {
  27.                 if (pressed) {
  28.                     //鼠标按住的前提下，坐标改变时，计算偏移量，应用到目标item的坐标上即可
  29.                     moveItem.x += mouseX - lastX
  30.                     moveItem.y += mouseY - lastY
  31.                 }
  32.             }
  33.         }
  34.     }
  35. }






上面例子中的MouseArea是拖动区域，Rectangle是要拖动的目标Item。
为了实现高度的可复用性，涛哥将MouseArea独立封装成一个组件,并提供一个control属性，
让外部使用组件实例的时候指定要拖动的目标。
复制代码
  1. // TMoveArea.qml
  3. import QtQuick 2.9
  5. MouseArea {
  6.     id: root
  8.     property real lastX: 0
  9.     property real lastY: 0
  10.     property bool mask: false       //有时候外面需要屏蔽拖动，导出一个mask属性， 默认false。
  11.     property var control: parent   //导出一个control属性，指定要拖动的目标， 默认就用parent好了。注意目标要有x和y属性并且可修改
  13.     onPressed: {
  14.         lastX = mouseX;
  15.         lastY = mouseY;
  16.     }
  17.     onContainsMouseChanged: { //修改一下鼠标样式，以示区别
  18.         if (containsMouse) {
  19.             cursorShape = Qt.SizeAllCursor;
  20.         } else {
  21.             cursorShape = Qt.ArrowCursor;
  22.         }
  23.     }
  24.     onPositionChanged: {
  25.         if (!mask && pressed && control)
  26.         {
  27.             control.x +=mouseX - lastX
  28.             control.y +=mouseY - lastY
  29.         }
  30.     }
  31. }



TMoveArea组件的用法
复制代码
  1. Item {
  2.     anchors.fill: parent
  4.     Rectangle {
  5.         x: 100
  6.         y: 200
  7.         width: 400
  8.         height: 300
  9.         color: "darkred"
  10.         //实例化一个MoveArea
  11.         TMoveArea {
  12.             //指定control为parent。 其实默认就是parent，写出来示意一下
  13.             control: parent
  14.             anchors.fill: parent
  15.         }
  16.     }
  17. }



一般来说，将
  property var control: parent中的var换成确切的类型比如Item会更好一些，Qml底层引擎处理var会慢一些，但是这样就限制了
目标必须是Item或者其子类。var是把双刃剑，有利有弊。涛哥后面要拖动的目标还包括QQuickView
这种类型，所以这里用var就好了。


拖动改变大小

拖动改变大小，原理参考下面这张示意图：

就是在要拖动的目标Item的8个位置分别放一个拖动组件，并在拖动时计算相应的坐标和大小变化即可。
涛哥先是把TMoveArea改造成了TDragRect
复制代码
  1. // TDragRect.qml
  2. import QtQuick 2.9
  3. import QtQuick.Controls 2.0
  4. Item {
  5.     id: root
  6.     property alias containsMouse: mouseArea.containsMouse
  7.     signal posChange(int xOffset, int yOffset)
  8.     implicitWidth: 12   //这里隐式的宽为12
  9.     implicitHeight: 12  //这里隐式的高为12
  10.     property int posType: Qt.ArrowCursor
  12.     //5.10之前, qml是不能定义枚举的，用只读的int属性代替一下。
  13.     readonly property int posLeftTop: Qt.SizeFDiagCursor
  14.     readonly property int posLeft: Qt.SizeHorCursor
  15.     readonly property int posLeftBottom: Qt.SizeBDiagCursor
  16.     readonly property int posTop: Qt.SizeVerCursor
  17.     readonly property int posBottom: Qt.SizeVerCursor
  18.     readonly property int posRightTop: Qt.SizeBDiagCursor
  19.     readonly property int posRight: Qt.SizeHorCursor
  20.     readonly property int posRightBottom: Qt.SizeFDiagCursor
  21.     MouseArea {
  22.         id: mouseArea
  23.         anchors.fill: parent
  24.         hoverEnabled: true
  25.         property int lastX: 0
  26.         property int lastY: 0
  27.         onContainsMouseChanged: {
  28.             if (containsMouse) {
  29.                 cursorShape = posType;
  30.             } else {
  31.                 cursorShape = Qt.ArrowCursor;
  32.             }
  33.         }
  34.         onPressedChanged: {
  35.             if (containsPress) {
  36.                 lastX = mouseX;
  37.                 lastY = mouseY;
  38.             }
  39.         }
  40.         onPositionChanged: {
  41.             if (pressed) {
  42.                 posChange(mouseX - lastX, mouseY - lastY)
  43.             }
  44.         }
  45.     }
  46. }



就是把前面的鼠标拖动时的处理逻辑，换成了带参数的信号发送出去，由外面决定怎么用这两个坐标
同时也定义了一组枚举，用来表示拖动区域的位置。位置不同，则鼠标样式不同。
之后涛哥写了一个叫TResizeBorder的组件，里面实例化了8个TDragRect组件，分别放在前面示意图
所示的位置，并实现了不同的处理逻辑。
(后来涛哥把上下左右四个中心点换成了四个边)
复制代码
  1. // TResizeBorder.qml
  2. import QtQuick 2.7
  4. Rectangle {
  5.     id: root
  6.     color: "transparent"
  7.     border.width: 4
  8.     border.color: "black"
  9.     width: parent.width
  10.     height: parent.height
  11.     property var control: parent
  12.     TDragRect {
  13.         posType: posLeftTop
  14.         onPosChange: {
  15.             //不要简化这个判断条件，至少让以后维护的人能看懂。化简过后我自己都看不懂了。
  16.             if (control.x + xOffset < control.x + control.width)
  17.                 control.x += xOffset;
  18.             if (control.y + yOffset < control.y + control.height)
  19.                 control.y += yOffset;
  20.             if (control.width - xOffset > 0)
  21.                 control.width-= xOffset;
  22.             if (control.height -yOffset > 0)
  23.                 control.height -= yOffset;
  24.         }
  25.     }
  26.     TDragRect {
  27.         posType: posMidTop
  28.         x: (parent.width - width) / 2
  29.         onPosChange: {
  30.             if (control.y + yOffset < control.y + control.height)
  31.                 control.y += yOffset;
  32.             if (control.height - yOffset > 0)
  33.                 control.height -= yOffset;
  34.         }
  35.     }
  36.     TDragRect {
  37.         posType: posRightTop
  38.         x: parent.width - width
  39.         onPosChange: {
  40.             //向左拖动时，xOffset为负数
  41.             if (control.width + xOffset > 0)
  42.                 control.width += xOffset;
  43.             if (control.height - yOffset > 0)
  44.                 control.height -= yOffset;
  45.             if (control.y + yOffset < control.y + control.height)
  46.                 control.y += yOffset;
  47.         }
  48.     }
  49.     TDragRect {
  50.         posType: posLeftMid
  51.         y: (parent.height - height) / 2
  52.         onPosChange: {
  53.             if (control.x + xOffset < control.x + control.width)
  54.                 control.x += xOffset;
  55.             if (control.width - xOffset > 0)
  56.                 control.width-= xOffset;
  57.         }
  58.     }
  59.     TDragRect {
  60.         posType: posRightMid
  61.         x: parent.width - width
  62.         y: (parent.height - height) / 2
  63.         onPosChange: {
  64.             if (control.width + xOffset > 0)
  65.                 control.width += xOffset;
  66.         }
  67.     }
  68.     TDragRect {
  69.         posType: posLeftBottom
  70.         y: parent.height - height
  71.         onPosChange: {
  72.             if (control.x + xOffset < control.x + control.width)
  73.                 control.x += xOffset;
  74.             if (control.width - xOffset > 0)
  75.                 control.width-= xOffset;
  76.             if (control.height + yOffset > 0)
  77.                 control.height += yOffset;
  78.         }
  79.     }
  80.     TDragRect {
  81.         posType: posMidBottom
  82.         x: (parent.width - width) / 2
  83.         y: parent.height - height
  84.         onPosChange: {
  85.             if (control.height + yOffset > 0)
  86.                 control.height += yOffset;
  87.         }
  88.     }
  89.     TDragRect {
  90.         posType: posRightBottom
  91.         x: parent.width - width
  92.         y: parent.height - height
  93.         onPosChange: {
  94.             if (control.width + xOffset > 0)
  95.                 control.width += xOffset;
  96.             if (control.height + yOffset > 0)
  97.                 control.height += yOffset;
  98.         }
  99.     }
  100. }



注意组件的顶层，使用的是透明的Rectangle，这样做的目的是，外面可以给这个组件设置
不同的颜色、边框等。无论哪种UI框架，透明处理都是需要一定的性能消耗的，所以在不需要显示
出来的情况下，组件顶层最好还是用Item替代。


融合

我们来实例化一个能拖动改变大小和位置的Item
复制代码
  1. Item {
  2.     width: 800
  3.     height: 600
  4.     Rectangle {
  5.         x: 300
  6.         y: 200
  7.         width: 120
  8.         height: 80
  9.         color: "darkred"
  10.         TMoveArea {
  11.             anchors.fill: parent
  12.             control: parent     //默认就是parent，可以不写。这里写出来示意一下。
  13.         }
  14.         TResizeBorder {
  15.             control: parent     //默认就是parent，可以不写。这里写出来示意一下。
  16.             anchors.fill: parent
  18.         }
  19.     }
  20. }




用起来还是挺方便的，直接在目标Item里面实例化一个TResizeBorder组件，指定control即可。
这里同时实例化了TMoveArea和TResizeBorder两个组件，作为目标Item的child，就把两种功能 融合起来了。
注意前后顺序，如果反过来写则TMoveArea会把ResizeBorder遮盖住。（Qml是有z轴的，以后的文章涛哥再讲）


多级组件和Qml应用的框架结构

回过头来看一下，先是封装了两个组件：TMoveArea和TDragRect，之后又封装了一个组件：TResizeBorder，
而这个TResizeBorder里面使用了多个TDragRect组件，显然是有层级结构在里面的。
涛哥把TMoveArea和TDragRect这样的最基础的组件叫做一级组件，那么TResizeBorder就是一个二级组件。
涛哥大量的实战经验后，总结出了这样一种Qml应用框架结构：
一级和二级组件可以单独做成一个插件(或者叫Qml通用库)。实际的Qml项目，在这些基础上，做一些功能性或者业务性的组件，即三级组件。由这些三级组件组成一堆的页面(Page)。最终的main.qml中，只剩下Page的布局。示意图如下：



自定义窗口

自定义窗口，这里以QQuickView


无边框

去掉边框，需要在C++中设置flag为Qt::FramelessWindowHint
同时我们注册view到qml上下文环境，给后面的功能来使用。
复制代码
  1. ...
  2.     QQuickView view;
  3.     view.setFlag(Qt::FramelessWindowHint);
  4.     view.rootContext()->setContextProperty("view", &view);
  5.     ...




可拖动窗口

将我们前面做的两种拖动框放在main.qml中，填满顶层Item，并指定control为view。
复制代码
  1. //main.qml
  3. import QtQuick 2.0
  5. #import TaoQuick 1.0      //这里是做成插件的情况下，引用了插件
  6. #import "qrc:/Tao/Qml"    //没有做插件的情况下，只要引用qml文件的资源路径即可
  8. Item {
  9.     //标题栏
  10.     TitlePage {
  11.         id: titleRect
  12.         width: root.width
  13.         height: 60
  14.         ...
  15.         //标题栏区域，实例化一个可以拖动位置的组件
  16.         TMoveArea {
  17.             height: parent.height
  18.             anchors {
  19.                 left: parent.left
  20.                 right: parent.right
  21.                 rightMargin: 170 //留一点右边距，给最小化、最大化、关闭等按钮用
  22.             }
  23.             //指定拖动目标为view
  24.             control: view
  25.         }
  26.         ...
  27.     }
  28.     //实例化一个拖动改大小的组件
  29.     TResizeBorder {
  30.         //指定拖动目标为view
  31.         control: view
  32.         anchors.fill: parent
  33.     }
  34.     ...
  35. }



自定义标题栏

标题栏的关键就是实现右侧的三个按钮，如果你看了《Qml组件化编程1-按钮的定制与封装》，
这都没有什么难度了。涛哥这里用图片按钮的方式实现。
注意最大化按钮在最大化状态下变成标准化按钮。
最小化：view.showMinimized()
最大化：view.showMaximized()
标准化：view.showNormal()
关闭: view.close()
这里给出关键代码
复制代码
  1. Item{
  2.     ...
  3.     property bool isMaxed: false
  4.     Row {
  5.         id: controlButtons
  6.         height: 20
  7.         anchors.verticalCenter: parent.verticalCenter
  8.         anchors.right: parent.right
  9.         anchors.rightMargin: 12
  10.         spacing: 10
  11.         TImageBtn {
  12.             width: 20
  13.             height: 20
  14.             imageUrl: containsMouse ? "qrc:/Image/Window/minimal_white.png" : "qrc:/Image/Window/minimal_gray.png"
  15.             onClicked: {
  16.                 view.showMinimized()
  17.             }
  18.         }
  19.         TImageBtn {
  20.             width: 20
  21.             height: 20
  22.             visible: !isMaxed
  23.             imageUrl: containsMouse ? "qrc:/Image/Window/max_white.png" : "qrc:/Image/Window/max_gray.png"
  24.             onClicked: {
  25.                 view.showMaximized()
  26.                 isMaxed = true
  27.             }
  28.         }
  29.         TImageBtn {
  30.             width: 20
  31.             height: 20
  32.             visible: isMaxed
  33.             imageUrl: containsMouse ? "qrc:/Image/Window/normal_white.png" : "qrc:/Image/Window/normal_gray.png"
  34.             onClicked: {
  35.                 view.showNormal()
  36.                 isMaxed = false
  37.             }
  38.         }
  39.         TImageBtn {
  40.             width: 20
  41.             height: 20
  42.             imageUrl: containsMouse ? "qrc:/Image/Window/close_white.png" : "qrc:/Image/Window/close_gray.png"
  43.             onClicked: {
  44.                 view.close()
  45.             }
  46.         }
  47.     }
  48. }




效果

最后，我们来看一下效果吧



转载声明

文章出自涛哥的博客 – 点击这里查看涛哥的博客
文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可, 转载请注明出处, 谢谢合作 © 涛哥


联系方式

  
作者涛哥
开发理念弘扬鲁班文化，传承工匠精神
博客https://jaredtao.github.io
知乎https://www.zhihu.com/people/wentao-jia
邮箱jared2020@163.com
微信xsd2410421
QQ759378563
  
请放心联系我，乐于提供咨询服务，也可洽谈商务合作相关事宜。


打赏

  
如果觉得涛哥写的还不错，还请为涛哥打个赏，您的赞赏是涛哥持续创作的源泉。
涛哥是个Qml高手，著有《Qml组件化编程》《Qml特效》系列教程，见知乎专栏-Qt进阶之路：https://zhuanlan.zhihu.com/TaoQt
或微信公众号：Qt进阶之路
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线big_mouse
禁止发言
只看该作者 3楼 发表于: 2020-04-15
回复
举报
离线dd759378563
新手上路
只看该作者 2楼 发表于: 2019-05-18
代码格式已经整理
涛哥是个Qml高手，著有《Qml组件化编程》《Qml特效》系列教程，见知乎专栏-Qt进阶之路：https://zhuanlan.zhihu.com/TaoQt
或微信公众号：Qt进阶之路
回复
举报
离线toby520
论坛版主
只看该作者 1楼 发表于: 2019-05-12
      代码格式 需要整理下
QtQML多多指教开发社区 http://qtclub.heilqt.com
将QtCoding进行到底
关注移动互联网，关注金融
开发跨平台客户端，服务于金融行业
专业定制界面
群号:312125701   373955953(qml控件定做)
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个