【QML】Property‘s

  ​前言

学习自：B站【英文字幕】Qt quick（QML)技术解读 入门到熟练

学习性质property的一些常用的基本的用法，示例为写入按钮的Rec，Text，MouseA，和信号的property

过程

在项目添新文件AddNew，QML File，命名为MyButton，在main函数中直接写入MyButton的各种属性，不用加入Rec，MouseA和Text区域。

1.首先把MyButton的Rec和Text属性写入main函数

MyButton{
        width: 100
        height: 64
        anchors.centerIn: parent

        borderColor: "green"
        backColor: "blue"
        borderWidth: 4
        radius: 20

        text:"my custom button"
        textColor: "black"
        fontSize: Math.round(blueRec.height/4)

    }

2.在MyButton.qml中的Item中命名id：button，并声明写过的属性

Item {
    id:button
    property string backColor
    property string borderColor
    property int borderWidth
    property int radius

    property string text
    property string textColor
    property int fontSize

3.在Item中写入Rec，描述属性参数，用main中MyButton中属性使用parent.,使用上述声明的属性，使用button(id).+name

Rectangle{
        id:blueRec
        color: button.backColor
        width: parent.width
        height:parent.height

        border.color:button.borderColor
        border.width: button.borderColor
        radius: button.radius
}

4.写入Text，同上，描述属性参数

Text {
        id:fooText
        anchors.centerIn: blueRec
        text: button.text
        color: button.textColor
        font.pixelSize: button.fontSize//
//        font.bold: true
    }

5.添加Mousearea的属性声明

//all the blueRecMouseArea propertys and signals

    //onEnter change's
    property string enteredColor
    property double enteredScale
    property string enteredBorderColor

    //onExit Changes
    property string exitedColor
    property double exitedScale
    property string exitedBorderColor

    property bool hoverEnabled: false

6.main函数中写明属性

        hoverEnabled: true
        enteredColor: "green"
        enteredScale: 1.5
        enteredBorderColor: "white"

        exitedColor: "blue"
        exitedScale: 1
        exitedBorderColor: "green"

7.MyButton函数中，在Item中加入MouseArea

MouseArea{
        id:blueRecMouseArea
        anchors.fill: blueRec
        hoverEnabled: button.hoverEnabled
        onEntered: {
            blueRec.scale = button.enteredScale
            blueRec.color =button.enteredColor
            blueRec.border.color = button.enteredBorderColor

        }
        onExited: {
            blueRec.scale = button.exitedScale
            blueRec.color =button.exitedColor
            blueRec.border.color = button.exitedBorderColor

        }


        onClicked: {
            console.log("hello form qml")
        }
    }

8.信号和槽的property，在MyButton函数中的Item属性中声明

signal buttonClicked

9.改变MouseA中的触发函数onClicked函数

onClicked: {
            buttonClicked()//console.log("hello form qml")
        }

10.在main函数写明属性值

 onButtonClicked: console.log("hello hah")