qml component

Component

Customize a button.
Note: The file name of the component Button.qml should start with capital letters, otherwise it cannot be called. do not know why

//Button.qml
import QtQuick 2.0

Item{
    id:root
    signal clicked
    width: 116
    height: 26
    Rectangle {
        id: rect
        anchors.fill: parent
        //alias（别名）功能，它可以将内部嵌套的QML元素的属性导出到外⾯使⽤
        property alias text: label.text
        width: parent
        height: parent
        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.qml文件名要大写，小写调用不了，不知道为什么
    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
    }
}

Source code: https://github.com/sunlianqi/qml/tree/master/compontents