若该文为原创文章，未经允许不得转载

​

各位读者，知识无穷而人力有穷，要么改需求，要么找专业人士，要么自己研究

目录

​​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;                  // 显示顺序，同一层的元素，越大越在上面
}

效果如下图：

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

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

Rectangle {
    width: 300; 
    height: 300; 
    color: "red"; 
    Text {
        anchors.centerIn: parent; // 位置：设置显示在父窗口中间，缺省为右上角
        text: "hello world! ";    // 内容：显示字符串
    }
}

效果如下图：

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

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";
            }
        }
    }
}

效果如下图：红色=>蓝色(鼠标右键)=>黄色（鼠标左键）

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

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

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


从上面几个看出来很多属性是类似的，从qt帮助文件中看出很多属性是继承的，那么先了解属性，我们从帮助文件开始，查看Rectangle相关的帮助文件：

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

Rectangle的定制属性只有4项，其中边框有宽度和颜色两个子项；其他都是继承于Item，我们查看Item的帮助文件，继承关系如下：

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

Item类，帮助文件中描述“The Item type is the base type for all visual items in Qt Quick.”，所以我们，学习属性先从Item开始，Item有属性和方法，其详解将在下一篇章介绍，属性和方法列表如下：

Properties

​​implicitHeight​​ : real

Methods


​