qml学习笔记(一)：界面元素初探

原博主博客地址：http://blog.csdn.net/qq21497936

本文章博客地址：http://blog.csdn.net/qq21497936/article/details/78498575

qml学习笔记(一)：界面元素初探

前话

    本学章节笔记主要引导进去qml学习，大致了解qml实现不同的元素界面效果的方式。

qml如何嵌入式qt（qt5以后），请查看博客

《Qt实用技巧：在Qt Gui程序中嵌入qml界面（可动态覆盖整个窗口）》：

                               http://blog.csdn.net/qq21497936/article/details/78486552

界面元素初探

    Qml由多个界面元素组成，其机制是一帧一帧的画，与Qt Gui指定重画特定的窗口机制不同，在开始元素学习之前，有几点需要注意，如下：

    1.每句末尾无需”;”，但多项同行需要”;”隔开，此处加上是为增加可读性)；

    2.声明必须为子对象的，其必须有父对象，运行无效，显示加载qml失败；

    3.包含属性的“"”，可以改为“'”，即单/双引号都可用；

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.bottom : AnchorLine
anchors.left : AnchorLine
anchors.right : AnchorLine
anchors.horizontalCenter : AnchorLine
anchors.verticalCenter : AnchorLine
anchors.baseline : AnchorLine
anchors.fill : Item
anchors.centerIn : Item
anchors.margins : real
anchors.topMargin : real
anchors.bottomMargin : real
anchors.leftMargin : real
anchors.rightMargin : real
anchors.horizontalCenterOffset : real
anchors.verticalCenterOffset : real
anchors.baselineOffset : real
anchors.alignWhenCentered : bool

antialiasing : bool
baselineOffset : int
children : list<Item>
childrenRect
childrenRect.x : real
childrenRect.y : real
childrenRect.width : real
childrenRect.height : real

clip : bool
data : list<Object>
enabled : bool
focus : bool
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)

原博主博客地址：http://blog.csdn.net/qq21497936

本文章博客地址：http://blog.csdn.net/qq21497936/article/details/78498575