Qt Quick——QML基礎（二）：自定義控件

1、新建一個QML工程，修改main.qml。

　　如下，修改Window中的內容。其中Button是自定義的控件

import QtQuick 2.6
import QtQuick.Window 2.2

Window {
    visible: true
//    width: 360
//    height: 360
    Button {
        id: button
        x: 12; y: 12
        text: "main Start"
        onClicked: {
            status.text = "Button clicked!"
        }
    }

    Text {
        id: status
        x: 12; y: 76
        width: 116; height: 26
        text: "waiting ..."
        horizontalAlignment: Text.AlignHCenter
    }
}

 

2、在main.qml所在的目錄中新建一個Button,qml文件

//Botton.qml
import QtQuick 2.0
/*
    文件名即自定義控件名
    使用別名導出屬性：相當於函數的變量形參
        不同的是導出的屬性，調用控件是可以不使用(賦值)
*/
Rectangle {
    id: root

    property alias text: label.text//導出自定義屬性
    signal clicked

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

    Text {
        id: label
        anchors.centerIn: parent
        text: "Start"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            root.clicked()
        }
    }
}