很多开发者可能希望能够在不改变现有的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的更多介绍请参阅
连接.
整个项目的源码在:
https://github.com/liu-xiao-guo/style