Discussion on the methods of using QML styling and Singleton

When we design our QML application, we want to change our settings file in one place, so as to modify the appearance of the entire application or make all the variables that use the same setting worthwhile to modify. For example, we can set baseurl= "Http://api.map.baidu.com/telematics/v3/weather?" property, we may have a few qml files need to use this property, then we did not do it? One way to do this is to define the same properties in each module. Another option is to use Singleton to centrally define a file, which is used by all modules. This approach is also suitable for our style of our application. We modify the settings in one place, but are used in all modules. This is similar to the definition of some constants that are used in a different. cpp file.

In order to achieve the functions we need above, we have designed the following SETTINGS.QML files:

Settings.qml

pragma singletonimport QtQuick 2.0QtObject {Property    Int. screenheight:960 Property    int screenwidth:640    Property string textSize: ' X-large ' property    string textcolor: ' Red '}

First, we can see that we used the Pragam Singleton at the beginning of the file to indicate that the file can only have one instance at the time of instantiation. Inside it, we made some small settings. What settings are needed for the specific developer and can be defined by themselves.
In addition, we must add the following Qmldir file under the root directory of our application:

Qmldir

Singleton Settings 1.0 SETTINGS.QML

This is a declaration file.
To show how we use it, we can use the following items that I created earlier:
git clone https://gitcafe.com/ubuntu/TabApp1.git

And make the following changes to TAB1.QML and 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 ")            color:Settings.textColor            fontSize:Settings.textSize        }    }}

In these two files, we also used the TEXTSIZE and TextColor attributes as defined in the same settings file SETTINGS.QML. When we fix the values of the uniform, all the places where they are used will be automatically modified without the need to make changes in each of the files, and here's when I set the text to "X-large" and "Red":



When we set "large" and "green" in the SETTINGS.QML:



As can be seen from the above, we can modify the settings and appearance of the whole application in the same place.
The source code for the entire project is: Git clone https://gitcafe.com/ubuntu/singleton.git

Nested qtobjects If you need to nest qtobjects to access more properties, you can use the following template:

Settings.qml.pragma Singleton Qtobject {Property Qtobject window:qtobject{property color background: ' White ';} prop  Erty 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";} }}

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Discussion on the methods of using QML styling and Singleton