在我先前的文章"如何得到屏幕和可用显示区域的大小尺寸及运用分辨率无关的编程",我已经阐述了如何运用units.gu来设计分辨率无关的应用.虽然如此,但是如果是对一些屏幕比较大的尺寸来说,我们还是希望可以改变它的一些布局以使得我们的内容显示更加饱满,更加生动.在Ubuntu手机平台中,我们可以使用AdaptivePageLayout来实现我们所需要的功能.通过这样的设计,我们可以使得我们的应用能够同时运行在平板及手机上并具有良好的用户体验.比如:
在上面的应用中,如果屏幕的宽度比较大,或在我们的设备中变为水平方向(landscape)时,我们希望可以充分利用屏幕右边的空间显示更多的内容,而不是需要按下一个"back"按钮回到上面的一个界面中.这种模式比较适用我们的平板上的landscape显示模式下的应用设计.上面显示的实际上是两个页面(左边是一个ListView,右边是一个message的detail页面).另外当我们的设备宽度比较窄(比如在portrait显示模式)的时候,我们希望有如下的界面:
在屏幕变为portrait显示时,我们可以使用上面的显示模式.每当一个列表的内容被打开后,我们把我们的内容推入到我们的pagestack中.当返回后,只需按下左上角的"<"按钮即可.这样可以使得我们每页的内容显示的不要太拥挤.
在今天的练习中,我们将使用我们前面练习"从零开始创建一个Ubuntu应用 -- 一个小小的RSS阅读器 (1)"中的例子来开始.我们可以通过如下的命令来获取该例程的代码:
$ git clone git@github.com:liu-xiao-guo/rssreader_cache.git
import QtQuick 2.4 import Ubuntu.Components 1.3也就是说 Ubuntu.Components 1.1/1.2都不支持.目前我们可以在Ubuntu Desktop 15.10上可以运行以下的代码.
Item { id: root signal clicked(var instance) property alias currentIndex : listView.currentIndex property alias model: listView.model property alias listview: listView ... }
import QtQuick 2.4 import Ubuntu.Components 1.3 import "components" MainView { // objectName for functional testing purposes (autopilot-qt5) objectName: "mainView" // Note! applicationName needs to match the "name" field of the click manifest applicationName: "rssreader.liu-xiao-guo" width: units.gu(60) height: units.gu(85) AdaptivePageLayout { id: layout anchors.fill: parent primaryPage: listPage layouts: PageColumnsLayout { when: width > units.gu(60) // column #0 PageColumn { minimumWidth: units.gu(30) maximumWidth: units.gu(60) preferredWidth: units.gu(40) } // column #1 PageColumn { fillWidth: true } } Page { id: listPage visible: false header: PageHeader { title: "POCO 摄影" trailingActionBar.actions: [ Action { iconName: "reload" text: "Reload" onTriggered: articleList.reload() } ] // flickable: articleList.listview } ArticleListView { id: articleList anchors { left: parent.left right: parent.right bottom: parent.bottom top: listPage.header.bottom } clip: true onClicked: { articleContent.text = instance.content layout.addPageToNextColumn(listPage, contentPage) } } } Page { id: contentPage header: PageHeader { title: "Content" } visible: false ArticleContent { id: articleContent objectName: "articleContent" anchors.fill: parent } } onColumnsChanged: { console.log("columns: " + columns ); if ( columns == 2 ) { console.log("currentIndex: " + articleList.currentIndex ) if ( articleList.currentIndex != undefined && articleList.currentIndex >= 0 ) { var model = articleList.model var index = articleList.currentIndex articleContent.text = model.get(index).content layout.addPageToNextColumn(listPage, contentPage) } } } } Action { id: reloadAction text: "Reload" iconName: "reload" onTriggered: articleList.reload() } }
layout.addPageToNextColumn(listPage, contentPage)
layouts: PageColumnsLayout { when: width > units.gu(60) // column #0 PageColumn { minimumWidth: units.gu(30) maximumWidth: units.gu(60) preferredWidth: units.gu(40) } // column #1 PageColumn { fillWidth: true } }
layouts: PageColumnsLayout { when: width > units.gu(200) // column #0 PageColumn { minimumWidth: units.gu(30) maximumWidth: units.gu(60) preferredWidth: units.gu(40) } // column #1 PageColumn { fillWidth: true } }