qml开发笔记(一)：界面元素初探

若该文为原创文章，未经允许不得转载
原博主博客地址：https://blog.csdn.net/qq21497936
原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062
本文章博客地址：http://blog.csdn.net/qq21497936/article/details/78498575
各位读者，知识无穷而人力有穷，要么改需求，要么找专业人士，要么自己研究

目录

qml开发笔记(一)：界面元素初探

前话

qml嵌入式qt（qt5以后）

界面元素初探

Rectangle：一个矩形框

Text：一个显示框，必须为子对象

MouseArea：处理鼠标输入，必须为子对象，其父对象必须为可视的

Properties

Methods

---

红胖子(红模仿)的博文大全：开发技术集合（包含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
• childrenRect
  • childrenRect.x : real
  • childrenRect.y : real
  • childrenRect.width : real
  • childrenRect.height : real
• clip : bool
• data : list