利用Style来使得我们的界面更加个性化

很多开发者可能希望能够在不改变现有的Ubuntu Toolkit中的控件的情况下，有个性地来改变一些属性．这样使得自己的界面更加个性化．目前我们在我们的官方网址可以查看到我们已经有的一些Style的一些控件．这个列表并不完善．更加详细的列表在地址可以看到．

下面，我们来用一个具体的例子来说明如何是用这些API来个性化我们的应用的：

Main.qml

import QtQuick 2.4
import Ubuntu.Components 1.3
import Ubuntu.Components.Themes 1.3
import Ubuntu.Components.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
                }
            }
        }
    }
}

在上面的代码中，我们使用了 PageHeaderStyle来个性化我们的page header．我们它的高度设置为units.gu(10)，同时我们也让我们的文字居中．

在下面的代码中，我们利用StyleHints来修改我们已经在使用的style的一些属性．比如：

            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
                }
            }

关于ButtonStyle的更多介绍请参阅连接．

整个项目的源码在： github.com/liu-xiao-gu…