QML元件的使用

• 聲明屬性
• 聲明信号函數
• 響應滑鼠事件
• 響應槽函數
• 聲明元件
• 使用元件

聲明屬性

/*
    *聲明一個信号函數 變量名是cellColor 值是rectangle.color的值
    *alias就是自動解析類型
    */
    property alias cellColor: rectangle.color
           

聲明信号函數

/*
     * 聲明一個信号函數
    */
    signal clicked(color cellcolor)
           

響應滑鼠事件

MouseArea{
        anchors.fill: parent
        onClicked: container.clicked(container.cellcolor)
    }
           

響應槽函數

/*
         * 處理cell的信号事件，如果cell發送了信号就設定Text的值
        */
        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
           

聲明元件

import QtQuick 
import QtQuick.Controls 
/*
*元件名字的首字母都必須是大寫的
*/
Item {
    id:container
    /*
    *聲明一個信号函數 變量名是cellColor 值是rectangle.color的值
    *alias就是自動解析類型
    */
    property alias cellColor: rectangle.color
    /*
     * 聲明一個信号函數
    */
    signal clicked(color cellcolor)
    width: 
    height: 
    Rectangle{
        id:rectangle
        border.color: "white"
        anchors.fill: parent
        height:
    }
    MouseArea{
        anchors.fill: parent
        onClicked: container.clicked(container.cellcolor)
    }
}
           

使用元件

import QtQuick 2.0
import QtQuick.Controls 2.2
Rectangle {
    id:page
    width: 
    height: 
    color: "lightgray"
    Text{
        id:helloText
        text:"hello world"
        anchors.topMargin: 
        anchors.top: page.top
        anchors.horizontalCenter: page.horizontalCenter
    }
    Grid {
        id: colorPicker
        x: 
        anchors.bottom: page.bottom
        anchors.bottomMargin: 
        rows: 
        columns: 
        spacing: 
        /*
         * 處理cell的信号事件，如果cell發送了信号就設定Text的值
        */
        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
        Cell { cellColor: "black"; onClicked: helloText.color = cellColor }

    }
}