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 }

    }
}