在今天的这篇文章中,我们将介绍在Ubuntu平台中如何使用页面布局自动适配不同的屏幕尺寸,从而使得同一个应用在不同屏幕尺寸上使得我们的应用显示更加合理。更确切地说我们在不同的屏幕尺寸的设备中不需要修改我们的代码。这对于为了Ubuntu平台的convergence非常有用。本文的英文出处“Adaptive page layouts made easy”。
这种自适应布局对有些应用非常有用。比如对于一个信息的应用来说,如果运行在PC或平板电脑上,在屏幕的左边我们可以显示所有信息的列表,而在屏幕的右边显示所选对话的的conversation的细节。而对于一个小的屏幕的设备,比如说手机来说,在开始的页面只能显示信息的列表,而当一个信息被选中后,信息的详细信息将被显示在同样的屏幕尺寸的另外一个页面。等我们看完信息后,我们可以通过返回键重新返回到列表的页面。在Ubuntu的设计中,我们不需要为这两种情况分别发布我们的应用。我们只需要使用我们Ubuntu平台提供的自适应页面布局就可以完全搞定。
详细的视频可以观看视频“Ubuntu 手机邮件软件”。
特别需要指出的是,为了完成这个功能,我们必须在我们的应用中使用AdaptivePageLayout。目前该API只限于Ubuntu.Components 1.3。目前这个API还处于开发中,并在不断地完善。我们可以在Wily (15.10)中体会这个功能。如果你的桌面电脑是vivid (Ubuntu 15.04)的话,你可以通过添加如下的PPA来得到最新的Ubuntu.Component 1.3:
$add-apt-repository ppa:ci-train-ppa-service/stable-phone-overlay
$apt-get update
$apt-get upgrade
这样你就可以先体验这个功能了。如果你想在你的手机上体验的话,你也需要把手机的软件刷成15.10或以上。
AdaptivePageLayout
- property Page primaryPage
- function addPageToCurrentColumn(sourcePage, newPage)
- function addPageToNextColumn(sourcePage, newPage)
- function removePages(page)
onClicked: layout.addPageToNextColumn(rootPage, rightPage)
我们很容易看出来,rightPage显示在primaryPage的右边,它并没有覆盖我们左边的primaryPage。
import QtQuick 2.4
import Ubuntu.Components 1.3
/*!
\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: "adaptivepagelayout.liu-xiao-guo"
/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true
width: units.gu(100)
height: units.gu(70)
AdaptivePageLayout {
id: layout
anchors.fill: parent
primaryPage: rootPage
Page {
id: rootPage
title: i18n.tr("Root page")
Rectangle {
id: rect
anchors.fill: parent
color: "red"
border.color: "green"
border.width: units.gu(1)
Component.onCompleted: {
console.log("rect size: " + rect.width + " " + rect.height)
}
}
Column {
anchors {
top: parent.top
left: parent.left
margins: units.gu(1)
}
spacing: units.gu(1)
Button {
text: "Add page left"
onClicked: layout.addPageToCurrentColumn(rootPage, leftPage)
}
Button {
text: "Add page right"
onClicked: layout.addPageToNextColumn(rootPage, rightPage)
}
Button {
text: "Add sections page right"
onClicked: layout.addPageToNextColumn(rootPage, sectionsPage)
}
}
Component.onCompleted: {
console.log("Initial rootpage size: " + rootPage.width + " " + rootPage.height)
}
onWidthChanged: {
console.log("rootPage width changed: " + rootPage.width)
}
}
Page {
id: leftPage
title: i18n.tr("First column")
Rectangle {
anchors {
fill: parent
margins: units.gu(2)
}
color: UbuntuColors.orange
Button {
anchors.centerIn: parent
text: "right"
onTriggered: layout.addPageToNextColumn(leftPage, rightPage)
}
}
Component.onCompleted: {
console.log("Initial leftPage size: " + leftPage.width + " " + leftPage.height)
}
onWidthChanged: {
console.log("leftPage width changed: " + leftPage.width)
}
}
Page {
id: rightPage
title: i18n.tr("Second column")
Rectangle {
anchors {
fill: parent
margins: units.gu(2)
}
color: UbuntuColors.green
Button {
anchors.centerIn: parent
text: "Another page!"
onTriggered: layout.addPageToCurrentColumn(rightPage, sectionsPage)
}
}
Component.onCompleted: {
console.log("Initial rightPage size: " + rightPage.width + " " + rightPage.height)
}
onWidthChanged: {
console.log("rightPage width changed: " + rightPage.width)
}
}
Page {
id: sectionsPage
title: i18n.tr("Page with sections")
head.sections.model: [i18n.tr("one"), i18n.tr("two"), i18n.tr("three")]
Rectangle {
anchors {
fill: parent
margins: units.gu(2)
}
color: UbuntuColors.blue
}
onWidthChanged: {
console.log("sectionsPage width changed: " + sectionsPage.width)
}
}
}
}