学QML（二)之使用Loader

Loader 用来动态加载 QML 组件。 我们可以把 Loadei 作为占位符使用，在需要显示某个元素时， 才使用 Loader 把它加载进来。

Loader 详细介绍

Loader 可以使用其 source 属性加载一个 QML 文档， 也可以通过其 sourceComponent 属 性加载一个 Component 对象。当你需要延迟一些对象直到真正需要才创建它们时，Loader 非 常有用。当 Loader 的 source 或 sourceComponent 属性发生变化时， 它之前加载的 Component 会自动销毁， 新对象会被加载。 将 source 设置为一个空字符串或将 sourceComponent 设置为 undefined, 将会销毁当前加载的对象，相关的资源也会被释放， 而 Loader 对象则变成一个空 对象。 .

Loader 的 item 属性指向它加载的组件的顶层 Item, 比如 Loader 加载了颜色选择组件， 其 item 属性就指向颜色选择组件的 Rectangle 对象。 对于 Loader 加载的 Item, 它暴露出来 的接口， 如属性、信号等， 都可以通过 Loader 的 item 属性来访问。所以， 我们才可以这么 使用。

我们改变一下颜色选择器示例的代码， 两个 Loader 对象， 一个设置尺寸， 一个不设置， 看看是什么效果

import QtQuick 2.0

Rectangle {
    width: 320;
    height: 240;
    color: "#C0C0C0";

    Text {
        id: coloredText;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.top: parent.top;
        anchors.topMargin: 4;
        text: "Hello World!";
        font.pixelSize: 32;
    }

    Component {
        id: colorComponent;
        Rectangle{
            id: colorPicker;
            width: 50;
            height: 30;
            signal colorPicked(color clr);
            property Item loader;
            border.width: focus ? 2 : 0;
            border.color: focus ? "#90d750" : "#808080";
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    colorPicker.colorPicked(colorPicker.color);
                    loader.focus = true;
                }
            }
            Keys.onReturnPressed: {
                colorPicker.colorPicked(colorPicker.color);
                loader.focus = true;
            }
            Keys.onSpacePressed: {
                colorPicker.colorPicked(colorPicker.color);
                loader.focus = true;
            }
        }
    }
    Loader{
        id: redLoader;
        width: 80;
        height: 60;
        focus: true;
        anchors.left: parent.left;
        anchors.leftMargin: 4;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;
        sourceComponent: colorComponent;
        KeyNavigation.right: blueLoader;
        KeyNavigation.tab: blueLoader;
        onLoaded: {
            item.color = "red";
            item.focus = true;
            item.loader = redLoader;
        }
        onFocusChanged: {
            item.focus = focus;
        }
    }
    Loader{
        id: blueLoader;
        anchors.left: redLoader.right;
        anchors.leftMargin: 4;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;
        sourceComponent: colorComponent;
        KeyNavigation.left: redLoader;
        KeyNavigation.tab: redLoader;

        onLoaded:{
            item.color = "blue";
            item.focus = blueLoader;
        }
        onFocusChanged: {
            item.focus = focus;
        }
    }
    Connections{
        target: redLoader.item;
        onColorPicked: {
            coloredText.color =  clr;
        }
    }
    Connections{
        target: blueLoader.item;
        onColorPicked:{
            coloredText.color = clr;
        }
    }
}

首先我让颜色选择组件处理按键事件，收到回车键和空格键时发 出 colorPidced 信号。我还给颜色选择组件定义了一个名为 loader 的属性， 以便用鼠标点击颜 色选择组件时可以改变.Loader 对象的焦点属性。我们在 Loader•的 onLoaded 信号处理器中给 颜色选择组件的 loader 属性赋值。

颜色选择组件根据焦点状态决定是否绘制边框， 当有焦点时绘制宽度为 2 的边框。

对于 Loader, 我 设 置 了 KeyNavigation 附加属性， 指定左、右键和 Tab 键如何切换焦点, 而当焦点变化时， 同步改变颜色选择组件的焦点。 最后我设置 redLoader 拥有初始焦点。

你可以运行 “ qmlscene loader_focus.qml” 命令看看效果，用鼠标点击某个颜色选择组件， 会触发焦点切换和边框变化， 左、 右键和 Tab 键也会触发焦点变化， 而当一个颜色选择组件 拥有焦点时， 回车键、 空格键都可以触发 “ Hello World!” 改变颜色。 

《Qt Quick核心编程》