在今天的這篇文章中，我們將介紹在Ubuntu平臺中如何使用頁面佈局自動適配不同的螢幕尺寸，從而使得同一個應用在不同螢幕尺寸上使得我們的應用顯示更加合理。更確切地說我們在不同的螢幕尺寸的裝置中不需要修改我們的程式碼。這對於為了Ubuntu平臺的convergence非常有用。本文的英文出處“Adaptive page layouts made easy”。

這種自適應佈局對有些應用非常有用。比如對於一個資訊的應用來說，如果執行在PC或平板電腦上，在螢幕的左邊我們可以顯示所有資訊的列表，而在螢幕的右邊顯示所選對話的的conversation的細節。而對於一個小的螢幕的裝置，比如說手機來說，在開始的頁面只能顯示資訊的列表，而當一個資訊被選中後，資訊的詳細資訊將被顯示在同樣的螢幕尺寸的另外一個頁面。等我們看完資訊後，我們可以通過返回鍵重新返回到列表的頁面。在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)
            }
        }
    }
}