Ubuntu手机中的Theme运用

我们现在的很多的Ubuntu core apps的界面都比较统一，颜色一致．这主要是它们运用了统一的颜色及调色板．在今天的教程中，我们来展示一下如何运用我们Ubuntu所提供的Theme来创建统一界面的UI.

我们直接来展示我们的代码：

import QtQuick 2.0
import Ubuntu.Components 1.1
import Ubuntu.Components.Themes 0.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "palette.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(60)
    height: units.gu(85)

    Page {
        title: i18n.tr("palette")

        Palette {
            id: theme
        }

        SystemPalette {
            id: palette
        }

        Column {
            anchors.fill: parent
            spacing: units.gu(2)

            Rectangle {
                width: parent.width
                height: units.gu(5)
                color: Theme.palette.selected.background
            }

            Rectangle {
                width: parent.width
                height: units.gu(5)
                color: Theme.palette.selected.overlay
            }

            Rectangle {
                width: parent.width
                height: units.gu(5)
                color: Theme.palette.selected.foreground
            }

            Rectangle {
                width: parent.width
                height: units.gu(5)
                color: Theme.palette.selected.selection
            }

            Rectangle {
                width: parent.width
                height: units.gu(5)
                color: Theme.palette.normal.overlay
            }

            Rectangle {
                width: parent.width
                height: units.gu(5)
                color: Theme.palette.normal.foreground
            }

            Rectangle {
                width: parent.width
                height: units.gu(5)
                color: Theme.palette.normal.background
            }

            Rectangle {
                width: parent.width
                height: units.gu(5)
                color: Theme.palette.normal.selection
            }

            Rectangle {
                width: parent.width
                height: units.gu(5)
                color: palette.highlight
            }

            Rectangle {
                width: parent.width
                height: units.gu(5)
                color: palette.button
            }

            Text {
                text: "this is good"
                color: Theme.palette.normal.baseText
            }
        }
    }
}

从上面的代码中，我们没有运用自己定义的颜色．相反，我们运用了系统Theme提供的颜色来绘制我们的界面．这样当系统的调色板发生变化后，我们的颜色也将跟着发生变化，我们不需要做任何的修改．

运行我们的代码：

我们项目的代码在：https://github.com/liu-xiao-guo/palette