Qml 学习记录1（持续补充）

Item和Rectangle

什么时候用Item，就是你要做一个组件，这个组件是一个复合的组件，组件有部分是有显示项。这种情况下，就用Item。如果你的元素是作为一个整体，以后不需要变动和更改，那么就用Rectangle。

Row和RowLayout

什么时候用Row布局，当布局里面的所有元素的尺寸宽高都明确的时候，用Row布局，你可以精确细化到每个元素的宽高。
RowLayout布局，自带了一个自适应的布局方式，比如填充满，然后比如元素的比例。如果一个行中只有部分元素的尺寸是已知的，那么可以考虑用此布局。

区别参考说明：
https://blog.youkuaiyun.com/sxczzZ/article/details/130555314

qml中QtObject类型的使用

（1）QtObject 类型是一个非可视元素，仅包含 objectName 属性。
如果需要一个非常轻量级的类型来包含一组自定义属性，那么创建一个 QtObject 会很合适。
它对于 C++ 集成也很有用，因为它继承自 QObject。

import QtQuick 2.0
 
Item 
{
    QtObject 
    {
        id: attributes
        property string name
        property int size
        property variant attributes
    }
 
    Text { text: attributes.name }
}

objectName的使用

（2）私有化
示例：

MyRectangle.qml

import QtQuick 2.0
import QtQml 2.12

Rectangle {
    id: rect
    width: 100
    height: 100
    color: "green"

    Component.onCompleted: {
        console.log(attributes.usrName)
    }

    property string hobby: ""

    property alias attr: attributes
    QtObject {
        id: attributes
        property string usrName: "zhangSan"
    }
}

main.qml

import QtQuick 2.0
import QtQuick.Controls 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.3
import QtQml 2.12

Window {
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    Row {
        MyRectangle {
            hobby: "play games..."

            Component.onCompleted: {
                attr.usrName = "zhangSan"
                console.log(attr.usrName)
            }
        }
    }
}

观察代码，MyRectangle组件中的 hobby属性可以直接访问赋值，例如在main.qml中 MyRectangle{ hobby: “play games…” }。
但是如何使其不能被访问 呢？？？
就可以将其放置在QtObject类型中。例如，MyRectangle.qml中的usrName属性。此时，在main.qml中就不能直接通过 MyRectangle { usrName: “xxx” }这种形式访问赋值了，否则报错如下：
qrc:/main.qml:17 Cannot assign to non-existent property “usrName”

// main.qml
 Row {
     MyRectangle {
		hobby: "play games..."

         usrName: "zzzz"	// 错误，

         Component.onCompleted: {
             attr.usrName = "zhangSan"
             console.log(attr.usrName)
         }
     }
 }

起到了一种类似私有化的作用（仅限在MyRectangle.qml中访问）

Rectangle clip属性

此属性对子类超出显示范围后的显示方式做设置。
true则表示如果他的子类超出了范围，那么就剪切掉，不让他显示和起作用

WorkerScript

使用 WorkerScript 在新线程中运行操作。这对于在后台运行操作很有用，这样主 GUI 线程就不会被阻塞。
可以使用 sendMessage() 和 onMessage() 处理程序在新线程和父线程之间传递消息。
示例：

import QtQuick 2.9
import QtQuick.Window 2.2
Window
{
    visible: true
    width: 840
    height: 600
    Rectangle
    {
        anchors.fill: parent
        Text
        {
            id: myText
            text: '单击任何位置'
        }
        WorkerScript
        {
            id: myWorker
            source: "qrc:/script.mjs"
            onMessage: function(messageObject)
            {
                myText.text = messageObject.reply
            }
        }
        MouseArea
        {
            anchors.fill: parent
            onClicked: function(mouse)
            {
                myWorker.sendMessage({ 'x': mouse.x, 'y': mouse.y })
            }
        }
    }
}