Quick QML信號與槽示例

功能

使文字隨着窗口的改變，始終保持在窗口中央。

 程序

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
Rectangle {
    id:win;   //設置窗口的id值,方便在別處引用
    width: 300;     //設置寬度和和高度
    height: 200;
    color:"red";   //設置窗口的背景色爲紅色
    Text     //定義一個文本對象
    {
     anchors.centerIn:parent;
     id:txt;  //設置文本的id
     text:"center Text";  //設置文本的內容
     font.pointSize: 20;  //設置字體的大小
    }
    //信號處理的方式一
    onWidthChanged: widthChanged();  //窗口寬度變化處理的信號槽
    //信號處理的方式二
    onHeightChanged:  //窗口高度變化的信號槽
    {
     txt.y=(win.height-txt.height)/2;  //文本縱向居中
     //txt.anchors.verticalCenter=(win.anchors.verticalCenter-txt.anchors.verticalCenter)/2;//方式2
    }
    //定義一個方法
    function widthChanged()
    {
        txt.x=(win.width-txt.width)/2;  //文本橫向居中
        //txt.anchors.horizontalCenter=(win.anchors.horizontalCenter-txt.anchors.horizontalCenter)/2;//方式2
    }
}

運行結果

說明

窗口變化，會觸發兩個信號，onWidthChanged（寬度改變）和onHeightChanged（高度改變），這兩個信號觸發時，分別使文本位於寬度中心和高度中心便可。

使文本位於寬度中心和高度中心，有如下幾種方式：

1.寬度變化和高度變化時，均執行 txt.anchors.centerIn=parent;

2.寬度變化時，執行 txt.x=(win.width-txt.width)/2;，高度變化時，執行 txt.y=(win.height-txt.height)/2;

3.寬度變化時，執行 txt.anchors.horizontalCenter=(win.anchors.horizontalCenter-txt.anchors.horizontalCenter)/2; 高度變化時，執行 txt.anchors.verticalCenter=(win.anchors.verticalCenter-txt.anchors.verticalCenter)/2;。

或者，一種更簡單的方式：

直接使用

onWindowChanged:{
    txt.anchors.centerIn=parent;
}