自适应页面布局使得应用适应不同屏幕的尺寸变得更加容易

在今天的这篇文章中，我们将介绍在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

AdaptivePageLayout是一个Item，并具有一下的属性和方法：

property Page primaryPage
function addPageToCurrentColumn(sourcePage, newPage)
function addPageToNextColumn(sourcePage, newPage)
function removePages(page)

为了完全理解AdaptivePageLayout是如何工作的。想象一下AdaptivePageLayout在内部管理了无数个可能显示到你屏幕的虚拟的Column。并不是所有的虚拟的Column都是可见的。在默认的情况下，依赖于你的AdaptivePageLayout的尺寸的大小，只有一个或两个Column是可见的。一个页面可以被加入到一个虚拟的Column中。

被定义为primaryPage的页面将被显示在最左边的Column里。其它的Column里将是空的。

为了在第一页面显示另外一个Page，我们可以调用addPageToCurrentColumn()，并把当前页面primaryPage作为参数传人。这样显示的页面将会显示在同样的页面位置（同样的Column)，并在header的位置出现一个back的按钮来关掉页面，并返回到上一个页面中。这种情况和我们以前的PageStack是没有任何的差别的。这在我以前的文章“Ubuntu
OS上的QML应用框架”中有详细的介绍。



如上所示，当我们的屏幕尺寸为100x70 gu时，我们可以看出来在header部分出现一个返回的按钮以关掉当前页面，并返回。

当我们的屏幕尺寸为60x85 gu时：





就像我们之前所讲的，它和我们以前说说的PageStack是没有任何差别的。

接下来，我们调用addPageToNextColumn，并传人和上面一样的参数，我们就会发现不同的显示：

当我们的尺寸为100x70 gu时，



上面点击“Add page right”:

onClicked: layout.addPageToNextColumn(rootPage, rightPage)

我们很容易看出来，rightPage显示在primaryPage的右边，它并没有覆盖我们左边的primaryPage。

当我们把我们的尺寸改为60x85 gu时：





上面也是在点击“Add page right”时显示的画面。除了我们唯一修改的尺寸外，我们并没有修改其它的任何代码。就像上面图上显示的那样，由于屏幕尺寸的限制，rightPage覆盖了primaryPage，并在header部分显示一个返回的按钮。

我们可以在运行我们应用的情况下，在Desktop上通过拖拽的方式改变应用的宽度，我们可以看到应用的布局发生的改变。

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

整个项目的源码在：https://github.com/liu-xiao-guo/adaptivepagelayout