码迷,mamicode.com
首页 > 其他好文 > 详细

QML Styling 及 Singleton 使用方法浅谈

时间:2015-07-21 10:48:10      阅读:385      评论:0      收藏:0      [点我收藏+]

标签:

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


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


Settings.qml


pragma Singleton
import QtQuick 2.0

QtObject {
    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

这是一个声明文件。

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

git clone https://gitcafe.com/ubuntu/TabApp1.git

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


Tab1.qml


import QtQuick 2.0
import Ubuntu.Components 1.1
// Needed for singletons QTBUG-34418
import "."

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.0
import Ubuntu.Components 1.1
// Needed for singletons QTBUG-34418
import "."

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”时的截图:

技术分享   技术分享


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

整个项目的源码在:git clone https://gitcafe.com/ubuntu/singleton.git


嵌套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";
 }
 }
}




版权声明:本文为博主原创文章,未经博主允许不得转载。

QML Styling 及 Singleton 使用方法浅谈

标签:

原文地址:http://blog.csdn.net/ubuntutouch/article/details/46980635

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!