一篇文章搞懂QML对象组件

QML对象类型主要有五种（ QML object types）

1.组成部件（Component）

组成部件一般用于复用或多加载 代码如下：

import QtQuick 2.15

Window
{
    height: Screen.height  //让其显示最大化
    width: 640  //让其显示最大化
    visible: true
    title: qsTr("Hello World")
    Item {
        width: 100; height: 100

        Component {
            id: redSquare
            Rectangle {
                color: "red"
                width: 100
                height: 100
            }
        }
 		//加载部件第一次
        Loader { sourceComponent: redSquare }
        //加载部件第二次
        Loader { sourceComponent: redSquare; x: 200 }
    }
}

2.Qt对象模型–QtObject

QtObject类型是一个非可视元素，它只包含objectName属性 代码如下：

import QtQuick 2.15

Window
{
    height: Screen.height  //让其显示最大化
    width: 640  //让其显示最大化
    visible: true
    title: qsTr("Hello World")
    QtObject {
        id: attributes
        property string color: "red"
        property int size:100
    }
    Item {
        width: 100; height: 100

        Component {
            id: redSquare

            Rectangle {
                color: attributes.color
                width: attributes.size
                height: attributes.size
            }
        }
        Loader { sourceComponent: redSquare }
        Loader { sourceComponent: redSquare; x: 200 }
    }
}

3.绑定–Binding

属性绑定是QML的核心特性，该特性允许我们指定不同对象属性之间的关系。当属性的依赖值发生变化时，该属性将根据指定的关系自动更新。

重点说明：
QML的属性绑定是单向的。myitem.msize的值改变时将会改变button.text的显示文本；但反过来则不会，即button.text的显示文本改变时，myitem.msize属性不会发生改变。

绑定的方法有很多，具体可以参考：https://zhuanlan.zhihu.com/p/561088573

import QtQuick 2.15
import QtQuick.Controls
Window
{
    height: Screen.height
    width: 640
    visible: true
    title: qsTr("Hello World")
    id:myitem
    property int msize:100
    Button {
            id: button
            x: 270
            y: 253
            text: qsTr("点击我")
            onClicked:
            {
                button.text = "fdhhh"
                console.log("==%d==",myitem.msize)
            }
        }
    Binding{
           target: button
           property: "text"
           value: myitem.msize
       }

    Timer {
        id:time
        interval: 1000; running: true; repeat: true
        onTriggered:
            myitem.msize++;
    }

}

4.连接Connections

主要是连接对象创建到QML信号的连接(和信号和槽一样)。

import QtQuick 2.15
import QtQuick.Controls
Window
{
    height: Screen.height
    width: 640
    visible: true
    title: qsTr("Hello World")
    property int msize:100
    Button{
        id:bt1;
        text: "btn";
    }
    Button{

        id:bt2;
        y:btn.y+100
        text: "btn1";
    }

    Connections{
        target: btn;
        onClicked:{
            btn1.text=myitem.msize++;
        }
    }

}

5.定时器Timer

在指定的时间间隔触发一个处理程序 代码如下：

import QtQuick 2.15

Window
{
    height: Screen.height
    width: 640
    visible: true
    title: qsTr("Hello World")

    Item {
        id:myitem
        property int msize:100
        Timer {
            id:time
            interval: 1000; running: true; repeat: true
            onTriggered:
                myitem.msize++;
        }

        Text {
            text: myitem.msize

        }
    }
}

如果对你有帮助，请给予作者一丝丝奖励