如何在Ubuntu中使用条件布局

我们知道现代手机可以随着手持的方位发生改变而使得手机的方位也随着发生改变。对有些应用来说，我们也希望手机的布局也能跟随发生变化。另外一种情况是当我们的应用安装到不同屏幕尺寸的平台上，我们希望我们的布局会随着屏幕的尺寸不同而发生不同的变化。我们可以利用剩余的空间显示更多的内容。在Ubuntu平台中，我们使用一个称作为conditinal layout的机制来使得我们的布局发生改变。在conditional layout的上面可以阅读更多的内容。

1）下载我们在上节中设计好的应用

我们可以在如下的地址：

bzr branch lp:~liu-xiao-guo/debiantrial/developernews3

下载我们的源码。我们可以安装到手机上并熟悉该应用。有关应用的文章在链接可以看到。

2）使用conditional layout

conditional layout能够使得我们根据屏幕的尺寸来安排我们的控件。下面我们来具体讲解怎么实现它：

1）在我们的main.qml中加入如下的库：

import Ubuntu.Layouts 1.0

2）在main.qml中的PageStack之前，加入如下的代码：

 Layouts {       id: mainLayout       anchors.fill: parent       layouts: [           ConditionalLayout {               name: 'flat'               when: mainLayout.width >= units.gu(70)               Page {                   id: flatPage                   title: i18n.tr("Developer News")                   tools: ToolbarItems {                       ToolbarButton {                           action: reloadAction                       }                   }                   Row {                          anchors.fill: parent                       ItemLayout {                           item: "articleList"                           width: parent.width >= units.gu(100) ? units.gu(50) : parent.width/2                           height: parent.height                       }                       ItemLayout {                           item: "articleContent"                           width: parent.width - articleList.width                           height: parent.height                       }                   }               }           }       ]       onCurrentLayoutChanged: {           if (mainLayout.currentLayout != 'flat') {               mainView.activeLeafNode = pageStack.currentPage           }       }

3）在PageStack中的ArticleListView加入：

 Layouts.item: "articleList"

4）在ArticleListView中的onClicked的如下代码：

 pageStack.push(contentPage)

替换为：

                   if (mainLayout.currentLayout != "flat") {                       contentPage.title = instance.title                       pageStack.push(contentPage)                   }

5）在ArticleContent的定义中加入：

Layouts.item: "articleContent"

6）在main.qml的最后端加入：

}

现在我们已经完成了我们的工作。我们现在运行一下我们的应用。当我们把我们的应用的尺寸设为如下的值时：

    width: units.gu(50)    height: units.gu(75)

  

当我们把应用的尺寸设为如下的值时：

    width: units.gu(100)    height: units.gu(75)

应用显示为：

最终的源码在如下地址可以找到：

bzr branch lp:~liu-xiao-guo/debiantrial/developernews4