我们现在的很多的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