Qt QML Component 学习笔记

简介　　

　　Component是Qt封装好的、只暴露必要接口的QML类型，能够重复利用。一个QML组件就像一个黑盒子，它经过属性、信号、函数和外部世界交互。

　　一个Component既能够定义在独立的QML文件（.qml为后缀的文件）中，也能够嵌入到其余的QML文件中来定义。那么这两种方式分别适用于什么场景呢？这里有一个原则能够帮助咱们去选择Component的定义方式：若是一个Component比较小且只在某个QML文件中使用，或者说一个Component从逻辑上来看属于某个QML文档，那么就能够采用嵌入的方式来定义该Component；若是这个Component有不少地方能够用到，也就是说复用率比较高，那么就能够采用定义在独立的QML文件中的方式。下面说明一下这两种实现Component方式的差异：

• 嵌入式定义Component：

 　　要在一个QML文件中嵌入Component的定义，须要使用Component对象。

　　定义一个Component与定义一个QML文件相似，Component只能包含一个顶层Item，并且在这个Item以外不能定义任何数据，除了id。 在顶层Item以内，则能够包含更多的子元素来协同工做，最终造成一个具备特定功能的组件。

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

　　Component不是Item的派生类，而是从QQmlComponent继承而来的，虽然它经过本身的顶层Item为其余的view提供可视化组件，但它自己是不可见元素。你能够这么理解：你定义的组件是一个新的类型，他必须被实例化之后才能显示。而要实例化一个嵌入在QML文件中定义的Component，则能够经过Loader。

• 在单独文件中定义Component：

　　不少时候咱们把一个Component单独定义在一个QML文件中，好比Qt Qucik提供的BusyIndicator空间，其实就是在BusyIndicator中定义一个组件(BusyIndicator.qml)：

Control {
    id: indicator

    /*! \qmlproperty bool BusyIndicator::running

    This property holds whether the busy indicator is currently indicating
    activity.

    \note The indicator is only visible when this property is set to \c true.

    The default value is \c true.
    */
    property bool running: true

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

    style: Settings.styleComponent(Settings.style, "BusyIndicatorStyle.qml", indicator)
}

　　能够看到BusyIndicator的代码很是简单，只是给Control元素（Qt Quick定义的私有元素，用做其余控件的基类，如ComboBox、BusyIndicator等）增长了一个属性，设置了几个值而已。

　　BusyIndicator.qml文件中的顶层Item是Control，而咱们使用时倒是以BusyIndicator为组件名（类名）。这是定义Component的一个约定：组件名必须和QML文件名一致，且组件名的首字母必须是大写的。Qt Quick提供的多数基本元素和特性，均可以在定义组件时使用 。

　　例子：在一个单独的QMl文件中定义颜色选择组件ColorPicker，对应QML文件为ColorPicker.qml，能够在其余的QMl文件中使用Cololr{...}来建立ColorPicker的实例。

import QtQuick 2.6

Rectangle {
    id: colorPicker
    width: 50
    height: 30
    signal colorPicked(color clr);

    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);
            mouse.accepted = true;
            colorPicker.focus = true;
        }
    }

    Keys.onReturnPressed: {  // 对应Enter键
        console.log("ColorPicker:onReturnPressed");
        colorPicker.colorPicked(colorPicker.color);
        event.accepted = true;
    }

    Keys.onSpacePressed: {  // 对应Space键
        console.log("ColorPicker:onSpacePressed");
        colorPicker.colorPicked(colorPicker.color);
        event.accepted = true;
    }

    onFocusChanged: {
        console.log("ColorPicker:onFocusChanged");
        configureBorder();
    }

    Component.onCompleted: {
        console.log("ColorPicker:onCompleted");
        configureBorder();
    }
}

　　在单独文件中定义Component，与嵌入式定义有明显的不一样：Component对象不见了，是由于在单独文件中定义组件，不须要Component对象，只有在其余QML文件中嵌入式定义组件时才须要Component对象。

　　main.qml内容：

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    visible: true
    width: 320
    height: 240
    title: qsTr("Component")

    Rectangle {
        width: parent.width
        height: parent.height
        color: "#EEEEEE"

        Text {
            id: coloredText
            anchors.centerIn: parent
            anchors.top: parent.top
            anchors.topMargin: 4
            text: "ColorPicker"
            font.pixelSize: 32
        }

        function setTextColor(clr) {
            coloredText.color = clr;
        }

        ColorPicker {
            id: redColor
            color: "red"
            focus: true
            width: parent.width / 3 - 4
            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"
            width: parent.width / 3 - 4
            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"
            width: parent.width / 3 - 8
            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);
            pinkColor.colorPicked.connect(setTextColor);
        }
    }
}

 

《Qt Quick核心编程》