QML 按钮组件

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12

//实现点击Start按钮，文本框显示"Button clicked!"

//窗口
Window {
    visible: true   //窗口可见
    width: 640      //窗口宽度
    height: 480     //窗口高度
    title: qsTr("Button")   //窗口标题

    //按钮组件
    Button {
        id: button  //按钮组件id
        x: 18; y: 18    //按钮位置
        text: "Start"   //按钮文本

        //点击操作
        onClicked: {
            status.text = "Button clicked!"
        }
    }

    //文本元素
    Text {
        id: status      //文本id
        x: 18; y: 78    //文本位置
        width: 118      //文本宽度
        height: 28      //文本高度
        text: "waiting..."  //文本值
        horizontalAlignment: Text.AlignHCenter  //文本水平对齐方式：对齐水平居中
    }

}

Button.qml
组件名称必须以大写字母开头

import QtQuick 2.0

//Item为基本元素对象，做容器使用，这里Item容器中有矩形框元素（Rectangle）、文本元素（Text）、鼠标区域元素（MouseArea）
//整个Item组成了一个简单的Button组件
Item {
    id:root //组件id
    width: 118  //组件宽度
    height: 28  //组件高度

    //矩形框元素
    Rectangle {
        anchors.fill: parent
        color: "red"
        border.color: "green"
    }

    //只有根级目录下的属性才能被其它文件的组件访问，故给组件的Text元素中的text属性取别名为text，使得main.qml可以直接通过text访问
    property alias text: label.text

    //点击信号
    signal clicked

    //文本元素
    Text {
        id: label   //文本id
        anchors.centerIn: parent    //锚定，居中在组件
        text: "Start"   //文本值
    }

    //鼠标区域
    MouseArea {
        anchors.fill: parent    //锚定在整个组件中
        onClicked: {
            root.clicked()  //点击信号
        }
    }
}