property使用方法

基本使用

格式：[required] [readonly] property 数据类型 变量名[: 初始化值]

• property用于定义自定义属性，可以在 QML 文件中声明并使用这些属性
• property允许在QML中创建可供其他组件或对象读取和修改的属性
• 通过readonly可以控制这个 property 是否只读
• 通过required可以控制这个 property 是否必须在外部进行设置

例如：在 Window 控件中嵌入一个 MyRectangle 控件（自定义），这个自定义控件中使用了 property 定义了几个变量，在 Window 控件对 MyRectangle 控件的实例化中可以对定义的 property 进行赋值

Main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import './components'

Window {
    id: window
    width: 640
    height: 480
    visible: true
    title: 'My QML'
    color: 'white'
    MyRectangle {
        myTopMargin: 10
        myBottomMargin: 20
    }
}

MyRectangle.qml

import QtQuick 2.12

Rectangle {
    id: outRect
    width: 100
    height: 100
    color: myString
    // 基本类型
    property int myTopMargin: 0
    property int myBottomMargin: 0
    property real myReal: 0.0
    property string myString: 'black'
    property color myColor: 'blue'
    property url myUrl: 'qrc://test.jpg'

    // 组件类型
    // 通过定义组件变量能够在外部控制需要加在什么组件
    property Component myComponent
    Rectangle {
        id: innerRect
        color: myColor
        anchors.fill: parent
        anchors.topMargin: myTopMargin
        anchors.bottomMargin: myBottomMargin
        anchors.leftMargin: 0
        anchors.rightMargin: 0
    }
}

通过声明 property，可以轻松地在不同的组件之间传递数据，并实现属性的动态更新，这为页面布局、组件交互等提供了更大的灵活性和可扩展性

变量类型

property支持多种变量类型，主要包括：

• int、real：分别用于表示整数和浮点数
• bool：用于表示布尔值
• string：用于表示文本字符串
• color：用于表示颜色值。例如：property color bgColor: "#FF0000"，定义了一个名为bgColor的颜色属性，初始值为红色
• point、size、rect：point表示二维点坐标，size表示二维尺寸，rect表示矩形。例如：property point position: Qt.point(100, 200)，定义了一个名为position的点属性，初始值为 (100, 200)
• variant、list：其中variant可以容纳任何类型的值，而 list只能容纳相同类型的值。例如：property variant data: [10, "foo", true]，定义了一个名为 data 的数组属性
• var：用于表示任意 JavaScript 对象。例如：property var myObject: {name: "Alice", age: 30}，定义了一个名为 myObject 的对象属性
• Component：用于动态加载组件

Property Component使用方式🌟

使用 property component 能够从外部（可以理解成父组件）控制组件的加载，结合 Loader 的使用其实可以理解成 Vue 中的插槽，例如：父控件在实例化子控件时时传入一个控件，此时如果子控件使用了 Loader 去承载这个 Component 的话就能将其渲染出来

例如：

Main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import './components'

Window {
    id: window;
    width: 640
    height: 480
    visible: true
    title: 'My QML'
    color: 'white'
    Component {
        id: com;
        Button {
            width: 50
            height: 50
        }
    }

    MyRectangle {
        myComponent: com
        myTopMargin: 10
    }
}

MyRectangle.qml

import QtQuick 2.12

Rectangle {
    id: outRect
    width: 100
    height: 100
    color: myString
    // 基本类型
    property int myTopMargin: 0

    // 组件类型
    // 通过定义组件变量能够在外部控制需要加在什么组件
    property Component myComponent

    Rectangle {
        id: innerRect
        color: myColor
        anchors.fill: parent
        anchors.topMargin: myTopMargin
        anchors.bottomMargin: myBottomMargin
        anchors.leftMargin: 0
        anchors.rightMargin: 0
        Loader {
            id: loader
            sourceComponent: myComponent
        }
    }
}

property设置别名

使用 property 还可以通过起别名的方式给控件的某一些属性起别名，方便外部使用，例如：

子控件：

property alias InnerRectColor: innerRect.color

父控件：

MyRectangle {
		InnerRectColor: 'red'
}

也可以通过这种方式暴露子控件的子控件，方便获取目标属性