Qml学习记录 六（组件）

本节对应（书名：QmlBook） 4.2.5 组件（Compontents）(页码75)

演示效果和代码（例子1）：

实现代码（未形成组件前）：

import QtQuick 2.0

Item {
    id: name
    Rectangle { //我们的内联按钮用户界面
           id:button
           x: 12; y:12
           width: 116; height: 26
           color: "lightsteelblue"
           border.color: "slategrey"
       Text {
           anchors.centerIn: parent
           text: qsTr("Start")
       }
       MouseArea { //鼠标事件
            anchors.fill: parent
            onClicked: {
                status.text = "Button Clicked!"
            }
       }
    }
    Text { //单击按钮时文本更改
       id: status
       x: 12; y:76
       width: 116; height: 26
       text: "waiting..."
       horizontalAlignment: Text.AlignHCenter
    }
}

封装后的例子

演示效果和代码（例子2）：

实现代码（形成组件后）：

//Button.qml
import QtQuick 2.0

Rectangle {
    id: root
    //alias（别名）功能，它可以将内部嵌套的QML元素的属性导出到外⾯使⽤
    property alias text: label.text
    signal clicked

    width: 116; height: 26
    color: "lightsteelblue"
    border.color: "slategrey"

    Text {
        id: label
        anchors.centerIn: parent
        text: "Start"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.clicked()
        }
    }
}

//Compontents.qml
import QtQuick 2.12
import QtQuick.Window 2.12

Item {
    id: name
    //新的Button元素只需要在我们的⽂件中简单的声明⼀下就可以了，之前的例⼦将会被简化
    Button {
        id: button
        x:12; y:12
        onClicked: {
            status.text = "Button clicked!"
        }
    }
    Text {
        id: status
        x: 12; y:76
        width: 116; height: 26
        text: qsTr("waiting...")
        horizontalAlignment: Text.AlignHCenter
    }
}

书中最后一段我测试了一下，但是发现行不通。哪位大佬如果行得通了，请告诉我下。蟹蟹！

注意
就个⼈⽽⾔，可以更进⼀步的使⽤基础元素对象（Item）作为根元素。这样可以防⽌⽤户改变我们设计的按钮的颜⾊，并且可以提供出更多相关控制的API（应⽤程序接⼝）。我们的⺫标是导出⼀个最⼩的API（应⽤程序接⼝）。实际上我们可以将根矩形框（Rectangle）替换为⼀个基础元素（Item），然后将⼀个矩形框（Rectangle）嵌套在这个根元素（root item）就可以完成了