Qt 5.4 QML Component 使用介绍

Question

Component 的定义

文档中嵌入 Component 的定义：

代码举例：

    Component {		//Component 本身不可见，需要借助 Loader
        id: colorComponent;//Item 之外定义 Component 的 id
        Rectangle {	//Component 通过此对象来为其他 view 提供可视化组件
            id: colorPicker;
            width: 50;
            height: 30;
            signal colorPicked(color clr);
            MouseArea {
                anchors.fill: parent
                onPressed: colorPicker.colorPicked(colorPicker.color);
            }
        }
    }

如果是嵌入 Component，需要用到 Component 关键字，在文件中独立定义，则可不需要 Component 关键字。

定义解释

定义一个 Component 与定义一个 QML 文档类似， Component 只能包含一个顶层 item ，而且在这个 item 之外不能定义任何数据，除了 id 。比如上面的代码中，顶层 item 是 Rectangle 对象，在 Rectangle 之外我定义了 id 属性，其值为 colorComponent 。而顶层 item 之内，则可以包含更多的子元素来协同工作，最终形成一个具有特定功能的组件。

Component 通常用来给一个 view 提供图形化组件，比如 ListView::delegate 属性就需要一个 Component 来指定如何显示列表的每一个项，又比如 ButtonStyle::background 属性也需要一个 Component 来指定如何绘制 Button 的背景。

Component 不是 Item 的派生类，而是从 QQmlComponent 继承而来，虽然它通过自己的顶层 item 为其它的 view 提供可视化组件，但它本身是不可见元素。

你可以这么理解：你定义的组件是一个新的类型，它必须被实例化以后才可能显示。而要实例化一个嵌入在 qml 文档中定义的组件，则可以通过 Loader 。

在单独文件中定义组件

很多时候我们把一个 Component 单独定义在一个 qml 文档中，比如 Qt Quick 提供的 BusyIndicator 控件，其实就是在 BusyIndicator.qml 中定义的一个组件。下面是 BusyIndicator.qml 文件的内容：

Control {
    id: indicator

    property bool running: true

    Accessible.role: Accessible.Indicator
    Accessible.name: "busy"

    style: Qt.createComponent(Settings.style + "/BusyIndicatorStyle.qml", indicator)
}

BusyIndicator.qml 文件中的顶层 item 是 Control ，而我们使用时却是以 BusyIndicator 为组件名（类名）。这是我们定义 Component 时要遵守的一个约定：

组件名字必须和 qml 文件名一致。

好嘛，和 Java 一样啦，类名就是文件名。还有一点， 组件名字的第一个字母必须是大写。

单独定义

文件名：ColorPicker.qml

import QtQuick 2.0
import QtQuick.Controls 1.1

Rectangle {
    id: colorPicker;
    width: 50;
    height: 30;
    signal colorPicked(color clr);			//定义信号 colorPicked
    
    function configureBorder(){
        colorPicker.border.width = colorPicker.focus ? 2 : 0;  
        colorPicker.border.color = colorPicker.focus ? "#90D750" : "#808080"; 
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            colorPicker.colorPicked(colorPicker.color);	//触发 colorPicked 信号，发出自身颜色
            mouse.accepted = true;	//禁止信号继续传递
            colorPicker.focus = true;	//获取焦点
        }
    }
    Keys.onReturnPressed: {
        colorPicker.colorPicked(colorPicker.color);	
        event.accepted = true;
    }
    Keys.onSpacePressed: {
        colorPicker.colorPicked(colorPicker.color);
        event.accepted = true;
    }
    
    onFocusChanged: {
        configureBorder();
    }
    
    Component.onCompleted: {
        configureBorder();
    }
}

ColorPicker.qml 组件文件的调用

import QtQuick 2.0
import QtQuick.Controls 1.1

Rectangle {
    width: 320;
    height: 240;
    color: "#EEEEEE";
    
    Text {
        id: coloredText;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.top: parent.top;
        anchors.topMargin: 4;
        text: "Hello World!";
        font.pixelSize: 32;
    }
    
    function setTextColor(clr){
        coloredText.color = clr;
    }
    
    ColorPicker {
        id: redColor;
        color: "red";
        focus: true;
        anchors.left: parent.left;
        anchors.leftMargin: 4;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;

        KeyNavigation.right: blueColor;
        KeyNavigation.tab: blueColor;  
        onColorPicked:{		//使用组件自身信号触发
            coloredText.color = clr;
        }      
    }
    
    ColorPicker {
        id: blueColor;
        color: "blue";
        anchors.left: redColor.right;
        anchors.leftMargin: 4;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;

        KeyNavigation.left: redColor;
        KeyNavigation.right: pinkColor;
        KeyNavigation.tab: pinkColor;   
    }
    
    ColorPicker {
        id: pinkColor;
        color: "pink";
        anchors.left: blueColor.right;
        anchors.leftMargin: 4;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;

        KeyNavigation.left: blueColor;
        KeyNavigation.tab: redColor;   
    }
    
    Component.onCompleted:{
        blueColor.colorPicked.connect(setTextColor);
//定义信号槽连接：组件对象 blueColor 的 colorPicked 信号连接到函数 setTextColor
        pinkColor.colorPicked.connect(setTextColor);
    }
}