QML Styling 及 Singleton 使用方法浅谈

在我们设计我们的QML应用时，我们想通过一个方法在一个地方来改变我们的设置文件，从而来修改整个应用的外观或使得所有的使用同一个设置的变量值得到修改。比如我们可以设置BaseUrl="http://api.map.baidu.com/telematics/v3/weather?” 属性，我们可能有几个QML文件都需要使用这个属性，那么我们怎么没做呢？一种办法就是在每个模块中都定义同样的属性。另外一种办法就是利用Singleton来集中定义在一个文件中，从而被所有的模块所使用。这样的方法同样适合我们style我们的应用。我们在一个地方修改设置，但是在所有的模块中都使用。这类似于C/C++中定义一些常量，在不同的.cpp文件中使用一样。

为了能够实现我们上面所需要的功能，我们设计了如下的Settings.qml文件：

Settings.qml

pragma Singletonimport QtQuick 2.0QtObject {    property int screenHeight: 960    property int screenWidth: 640    property string textSize: "x-large"    property string textColor: "red"}

首先，我们可以看到我们在文件的开始部分使用了pragam Singleton，表明这个文件在实例化时只能有一个实例。在它里面，我们做了一些小的设置。具体开发者需要什么样的设置，可以自己定义。

另外，我们必须在我们应用的根目录下添加如下的qmldir文件：

qmldir

singleton Settings 1.0 Settings.qml

这是一个声明文件。

为了展示我们如何使用，我们可以使用我先前创建的如下的项目：

https://github.com/liu-xiao-guo/TabApp1

并对Tab1.qml和Tab2.qml做如下的修改：

Tab1.qml

import QtQuick 2.0import Ubuntu.Components 1.1// Needed for singletons QTBUG-34418import "."Tab {    title: i18n.tr("Tab 1")    Action {        id: reloadAction        text: "Reload"        iconName: "reload"        onTriggered: {            console.log("reload is clicked")        }    }    page: Page {        Label {            anchors.centerIn: parent            text: i18n.tr("This is page one")            color: Settings.textColor            fontSize: Settings.textSize        }        tools: ToolbarItems {            ToolbarButton {                action: reloadAction            }        }    }}

Tab2.qml

import QtQuick 2.0import Ubuntu.Components 1.1// Needed for singletons QTBUG-34418import "."Tab {    title: i18n.tr("Tab 2")    page: Page {        Label {            anchors.centerIn: parent            text: i18n.tr("This is page two")            color: Settings.textColor            fontSize: Settings.textSize        }    }}

在这两个文件中，我们同时使用了同一个设置文件Settings.qml中所定义的textSize及textColor属性。当我们修个统一处的值时，所有使用它们的地方将自动被修改，而不需要在每一个文件中分别做修改，下面是我把文字设为“x-large”及“red”时的截图：

  

当我们在Settings.qml中设为“large”及“green”时的截图：

   

从上面可以看出来，我们在同一处修个可以改变整个应用的设置及外观。

整个项目的源码在：https://github.com/liu-xiao-guo/singleton

嵌套QtObjects

如果你需要嵌套QtObjects以访问更多的属性，可以采用如下的模版：

// Settings.qml.pragma Singleton QtObject { property QtObject window: QtObject{ property color background: "white"; } property QtObject border: QtObject{ property QtObject width: QtObject{ property int normal: 1; property int big: 3; } property QtObject color: QtObject{ property color normal: "gray"; property color focus: "blue"; property color disabled: "red"; } }}