Many developers may want to be able to change some properties individually without changing the controls in the existing Ubuntu Toolkit. This makes your interface more personalized. Currently we can view some of the Style controls we already have on our official website. This list is not complete. A more detailed list can be found at the address.

\

Let’s take a concrete example of how these apis can be used to personalize our application:

\

Main.qml

\

Import QtQuick 2.4 import Ubuntu.Components 1.3 import Ubuntu.Components.Themes 1.3 import Ubuntu.Com ponents.styles 1.3 MainView { // objectName for functional testing purposes (autopilot-qt5) objectName: "mainView" // Note! applicationName needs to match the "name" field of the click manifest applicationName: "style.liu-xiao-guo" width: units.gu(60) height: units.gu(85) Action { id: action1 text: "action 1" iconName: "compose" onTriggered: print("one!" ) } Page { header: PageHeader { id: pageHeader title: i18n.tr("pageheaderstyle") style: PageHeaderStyle { foregroundColor: UbuntuColors.orange backgroundColor: UbuntuColors.porcelain dividerColor: UbuntuColors.slate contentHeight: units.gu(10) Label { anchors.centerIn: parent fontSize: "x-large" text: styledItem.title } implicitHeight: contentHeight } } Image { id: pressed source: "images/pressed.jpg" visible: false } Image { id: unpressed source: "images/unpressed.jpg" visible: false } Column { anchors.centerIn: parent spacing: units.gu(5) Button { id: button1 width: units.gu(40) height: units.gu(15) text: "Nice" StyleHints { defaultColor: button1.pressed ? "blue" : "red" } } Button { id: button2 width: units.gu(40) height: units.gu(15) text: "Nice" StyleHints { backgroundSource: button2.pressed ? pressed : unpressed } } } } }Copy the code

In the code above, we use PageHeaderStyle to personalize our Page header. We set the height to units.gu(10), and we also center our text.

\

In the code below, we use StyleHints to modify some properties of the style we are already using. Such as:

\

            Button {
                id: button1
                width: units.gu(40)
                height: units.gu(15)
                text: "Nice"
                StyleHints {
                    defaultColor: button1.pressed ? "blue" : "red"
                }
            }
Copy the code

In the code above, when our button is pressed, the color changes to blue instead of red as usual:

\

  \

\

In addition, the following code can make our button display different images when pressed and when not pressed:

\

            Button {
                id: button2
                width: units.gu(40)
                height: units.gu(15)
                text: "Nice"
                StyleHints {
                    backgroundSource: button2.pressed ? pressed : unpressed
                }
            }
Copy the code

\

\

  \

\

For more information about ButtonStyle, see Links.

\

The entire project source at: github.com/liu-xiao-gu…

\