QML进阶(十一) QML元素之间的调用和交互

1.通过信号和槽函数实现元素模块之间的交互

QML中的信号和槽函数的处理和Qt-Widget中的流程一样

首先在对应的模块中声明对应的信号如下:

//Button1.qml
import QtQuick 2.5
Item {
    id:myItem
    //定义外部访问的信号
    signal message_1()         //不带参数的信号
    signal message_2(string msg) //带字符串参数的信号
    signal message_3(var pos_x,var pos_y)//带两个参数的信号 
    Rectangle{
		width: 290
        height: 30    
        gradient: Gradient{
            GradientStop { color: "#ff9a9e" ; position: 0 }
            GradientStop { color: "#fad0c4" ; position: 1 }
        }
        Text{
        anchors.centerIn: parent
            color: "white"
            text:btnText
        }
        MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            onClicked: {
                myItem.message_2("button1")
                //发送鼠标的位置
                myItem.message_3(mouse.x,mouse.y)
            }
            onEntered: {
                parent.color="#4D9CF8";
                myItem.message_1();
            }
            property real lastX: 0
            property real lastY: 0
            onPressed: {
                //鼠标按下时，记录鼠标初始位置
                lastX = mouseX
                lastY = mouseY
            }
            onPositionChanged: {
                if (pressed) {
                    //计算新新位置
                    myItem.x += mouseX - lastX
                    myItem.y += mouseY - lastY
                }
            }
        }
    }
}

其次在主元素当中将对应的信号和槽函数进行绑定，通过绑定之后我们就可以实现模块之间的数据通信了。

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    id: window
    width: 640
    height: 480
    visible: true
    Rectangle {
        id: root
        x:20;y:20
        width: 400
        height: 600
        color: "white"
        //点击矩形切换状态
        Button1 {
            id: createor
            x:50;y:100
            height: 60
            width: 300
        }
    }
    //连接对应的信号和槽函数
    Component.onCompleted: {
        createor.message_1.connect(onHandleMessage1)
        createor.message_2.connect(onHandleMessage2)
        createor.message_3.connect(onHandleMessage3)
    }
    function onHandleMessage1(){
        console.log(("Enter Input The Btn"))
    }
    function onHandleMessage2(btnText){
        console.log(qsTr("Button Text:") + btnText)
    }
    function onHandleMessage3(posx,posy){
        console.log(qsTr("Click Pos"))
        console.log("("+x+","+y+")")
    }
}

2.通过导出对应的属性值和方法实现元素之间的交互

给自定义控件添加方法和属性，控件定义属性需要用到关键字property。一个property是对象的一个属性，可以被赋为静态值或者是绑定到动态表达式上。一个property的值可以被其它的对象读取。一般情况下，property属性也可以被其它对象修改，除非该QML类型明确指定该property属性不能被修改。

一个property属性可以在C++中定义，并且通过Q_PROPERTY注册到QML类型系统。当然，我们也可以在QML文档中通过如下语法自定义对象的property属性：

property  

属性和方法的声明和定义如下所示:

//Button2.qml
import QtQuick 2.5

Item {
    id:myItem
    //导出按钮的文本内容默认为ButtonTest
    property string btnText : "ButtonTest"

    //导出的通用类型类似于C语言中的void
    property var exportValue;

    //导出数组变量
    property var strArray:[];

    //给某个属性定义一个别名进行导出
    property alias  textColor:test.color

    //供外部调用的函数
    function slotResetBtnText()
    {
        test.text = "ButtonTest"
    }

    Rectangle{
        width: 290
        height: 30
        gradient: Gradient{
            GradientStop { color: "#ff5858" ; position: 0 }
            GradientStop { color: "#f09819" ; position: 1 }
        }
        Text{
            id:test
            anchors.centerIn: parent
            color: "white"
            text: btnText
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                myItem.message("button2")
            }
        }
    }
}

在外部通过控件的属性与控件进行交互

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    id: window
    width: 640
    height: 480
    visible: true
    //点击矩形切换状态
    Button2 {
        id: createor
        x:50;y:100
        width:200
        height:50
        btnText:
        {
            if(input.text.length != 0)
            {
                input.text
            }
        }
    }
    Rectangle {
        id: btn
        anchors.top: createor.bottom
        anchors.left: createor.left
        anchors.right: createor.right
        color: "#4D9CF8"
        width: 200
        height: 50
        MouseArea{
            anchors.fill: parent
            onClicked: {
                //调用控件的方法
                createor.slotResetBtnText();

                //向数组中添加元素
                createor.strArray.push("first")
                //删除数组中的元素
                createor.strArray.pop()

                //将数组内容清空
                createor.strArray = []
                createor.strArray.length = 0;]
                //修改控件的颜色
                createor.textColor = "#FF00FF";
            }
        }
    }
    TextEdit{
        id: input
        anchors.top: btn.bottom
        anchors.left: btn.left
        anchors.right: btn.right
        width: 200
        height: 60
    }
}