signed

QiShunwang

“诚信为本、客户至上”

qml 组件

2021/3/21 0:10:28   来源:

组件

自定义一个button。
注意:组件Button.qml文件名要大写开头,不然调用不了。不知道为什么
在这里插入图片描述

//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
    }
}

源码:https://github.com/sunlianqi/qml/tree/master/compontents