若该文为原创文章，未经允许不得转载
原博主博客地址：https://blog.csdn.net/qq21497936
原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址：http://blog.csdn.net/qq21497936/article/details/78498575
各位读者，知识无穷而人力有穷，要么改需求，要么找专业人士，要么自己研究
目录
MouseArea：处理鼠标输入，必须为子对象，其父对象必须为可视的
红胖子(红模仿)的博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等）持续更新中...（点击传送门）
Qt开发专栏：qml开发（点击传送门）
qml开发笔记(一)：界面元素初探
前话
qml实现不同的元素界面效果的方式。
qml嵌入式qt（qt5以后）
请查看博客《Qt实用技巧：在Qt Gui程序中嵌入qml界面（可动态覆盖整个窗口）》
界面元素初探
Qml由多个界面元素组成，其机制是一帧一帧的画，与Qt Gui指定重画特定的窗口机制不同，在开始元素学习之前，有几点需要注意，如下：
- 每句末尾无需”;”，但多项同行需要”;”隔开，此处加上是为增加可读性)；
- 声明必须为子对象的，其必须有父对象，运行无效，显示加载qml失败；
- 包含属性的“"”，可以改为“'”，即单/双引号都可用；
Rectangle：一个矩形框
Rectangle { x: 0; // 右上角横坐标，缺省为0 y: 0; // 右上角纵坐标，缺省为0 width: 300; // 宽度，缺省为0，其子对象仍会显示（相对于0） height:300; // 高度，缺省为0，其子对象仍会显示（相对于0） color: "red"; // 颜色，缺省为白色或透明（父窗口和其显示都是白色，未进一步判断） opacity: 0.5; // 透明度，缺省为1 rotation: 30; // 旋转度，缺省为0，中心瞬时钟旋转 radius: 10; // 圆角度，缺省为0，从本元素最外框开始圆角 border.width: 20; // 边框宽度，缺省为0 border.color: "white"; // 边框颜色，缺省为黑色"balck" z: 1; // 显示顺序，同一层的元素，越大越在上面 }
效果如下图：
Text：一个显示框，必须为子对象
Rectangle { width: 300; height: 300; color: "red"; Text { anchors.centerIn: parent; // 位置：设置显示在父窗口中间，缺省为右上角 text: "hello world! "; // 内容：显示字符串 } }
效果如下图：
MouseArea：处理鼠标输入，必须为子对象，其父对象必须为可视的
Rectangle { width: 300; // 宽度，缺省为0，其子对象仍会显示（相对于0） height: 300; // 高度，缺省为0，其子对象仍会显示（相对于0） color: "red"; // 颜色 MouseArea { acceptedButtons: Qt.LeftButton | Qt.MiddleButton; // 缺省为Qt.RightButton anchors.fill: parent; // 缺省：无 onClicked: { if(mouse.button == Qt.LeftButton) { parent.color = " blue "; // 加空格也可以，机制中可能去掉所有空格 }else{ console.log("yellow"); // 打印到控制台 parent.color = "yellow"; } } } }
效果如下图：红色=>蓝色(鼠标右键)=>黄色（鼠标左键）
从上面几个看出来很多属性是类似的，从qt帮助文件中看出很多属性是继承的，那么先了解属性，我们从帮助文件开始，查看Rectangle相关的帮助文件：
Rectangle的定制属性只有4项，其中边框有宽度和颜色两个子项；其他都是继承于Item，我们查看Item的帮助文件，继承关系如下：
Item类，帮助文件中描述“The Item type is the base type for all visual items in Qt Quick.”，所以我们，学习属性先从Item开始，Item有属性和方法，其详解将在下一篇章介绍，属性和方法列表如下：
Properties
- activeFocus : bool
- activeFocusOnTab : bool
- anchors
- anchors.top : AnchorLine
- anchors.alignWhenCentered : bool
- anchors.baselineOffset : real
- anchors.verticalCenterOffset : real
- anchors.horizontalCenterOffset : real
- anchors.rightMargin : real
- anchors.leftMargin : real
- anchors.bottomMargin : real
- anchors.topMargin : real
- anchors.margins : real
- anchors.centerIn : Item
- anchors.fill : Item
- anchors.baseline : AnchorLine
- anchors.verticalCenter : AnchorLine
- anchors.horizontalCenter : AnchorLine
- anchors.right : AnchorLine
- anchors.left : AnchorLine
- anchors.bottom : AnchorLine
- antialiasing : bool
- baselineOffset : int
- children : list<Item>
- childrenRect
- childrenRect.x : real
- childrenRect.y : real
- childrenRect.width : real
- childrenRect.height : real
implicitHeight : real
- implicitWidth : real
- layer.effect : Component
- layer.enabled : bool
- layer.format : enumeration
- layer.mipmap : bool
- layer.samplerName : string
- layer.smooth : bool
- layer.sourceRect : rect
- layer.textureSize : size
- layer.wrapMode : enumeration
- opacity : real
- parent : Item
- resources : list<Object>
- rotation : real
- scale : real
- smooth : bool
- state : string
- states : list<State>
- transform : list<Transform>
- transformOrigin : enumeration
- transitions : list<Transition>
- visible : bool
- visibleChildren : list<Item>
- width : real
- x : real
- y :real
- z :real
Methods
- childAt(real x, real y)
- object contains(point point)
- forceActiveFocus(Qt::FocusReason reason)
- forceActiveFocus()
- object mapFromItem(Item item, real x, real y, real width, real height)
- object mapFromItem(Item item, real x, real y)
- object mapToItem(Item item, real x, real y, real width, real height)
- object mapToItem(Item item, real x, real y)、
- nextItemInFocusChain(bool forward)
原博主博客地址：https://blog.csdn.net/qq21497936
原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址：http://blog.csdn.net/qq21497936/article/details/78498575
