在编写手机程序的时候,往往一个页面是不够用的,一般应用都需要包括多个页面。在BB10 Cascades中多个页面的浏览处理方式有许多,包括NavigationPane,TabbedPane等。NavigationPane中可以包含几个页面,用户通过打开页面,返回上级页面来实现页面之间的切换,页面堆栈由NavigationPane管理。而TabbedPane是通过屏幕下方的标签按钮完成页面之间的切换,一个TabbedPane可以包含几个标签页,用户通过点击不同的标签来实现不同页面的切换。
NavigationPane和TabbedPane都相对复杂一点点,我们在后面的博文中再详细介绍,本文介绍的Sheet页面是一个更简单的多页面处理方式。
使用Sheet页面建构的应用基本上还是属于单页面应用,用户在主页面上完成主要工作,当用户需要完成额外的工作式,比如修改配置项,或者是填写用户名密码等,我们为用户弹出一个全屏的页面显示相应界面,处理完成后关闭该全屏页面继续在主页面上工作。
所以,基本上来讲,可以把Sheet页面当做是一个全屏对话框。
当然,Sheet页面也可以结合其它页面浏览方式一起使用,比如在NavigationPane中显示了某一个页面,在该页面需要完成额外工作时弹出一个Sheet页面让用户操作。
总之,不管使用什么方式切换页面,首先要保证的是用户在使用过程中可以清晰地了解页面之间的关系,不会被不断弹出的页面搞蒙。
因为Sheet页面的作用是比较简单的,所以它的使用也一样很简单。
首先是要在页面中嵌入一个Sheet对象,像下面的代码这样:
import bb.cascades 1.0 Page { Container {//你的主页面内容 } attachedObjects: [ Sheet { id: mySheet content: Page { //sheet页面的内容 } }//sheet页面结束 ]//嵌入对象结束 }//主页面结束
注意这里的Sheet页面给了一个id,id为mySheet,你可以根据现实情况使用喜欢的id名。为Sheet页面指定id的目的是在主页面上可以通过这个id操作sheet页面。当然,sheet页面的主要操作就是打开和关闭了,对应方法如下:
//打开sheet页面 mySheet.open(); //关闭sheet页面 mySheet.close();
为了在主页面中打开sheet页面,我们在主页面中加入一个按钮,点击该按钮就调用mySheet的open方法,代码如下:
Button { text: "Open Sheet" onClicked: { mySheet.open(); } horizontalAlignment: HorizontalAlignment.Center }
然后我们需要添加一个关闭sheet的动作,需要注意的是Sheet页面弹出时会覆盖主页面,所以将关闭Sheet的按钮放在主页面显然是有问题的,在Sheet页面弹出时用户根本无法点中主页面中的按钮。
所以我们需要把关闭Sheet的动作添加到Sheet页面中,为了样例生动一点,我们把关闭Sheet的动作添加到Sheet页面的菜单项中。添加了关闭动作的Sheet页面代码如下:
attachedObjects: [ Sheet { id: mySheet content: Page { Label { text: "This is a sheet." } actions: [ ActionItem { title: "Close Sheet" ActionBar.placement: ActionBarPlacement.OnBar onTriggered: { mySheet.close(); } } ] } } ]
下面是完整的代码:
// Default empty project template import bb.cascades 1.0 // creates one page with a label Page { Container { layout: StackLayout { } Label { text: qsTr("Sheet Test") textStyle.base: SystemDefaults.TextStyles.BigText verticalAlignment: VerticalAlignment.Center horizontalAlignment: HorizontalAlignment.Center } Button { text: "Open Sheet" onClicked: { mySheet.open(); } horizontalAlignment: HorizontalAlignment.Center } } attachedObjects: [ Sheet { id: mySheet content: Page { Label { text: "This is a sheet." } actions: [ ActionItem { title: "Close Sheet" ActionBar.placement: ActionBarPlacement.OnBar onTriggered: { mySheet.close(); } } ] } } ] }
以上代码执行的效果如下,点击其中的“Open Sheet”按钮会弹出一个Sheet页面:
弹出的Sheet页面如下,点击其中的“Close Sheet”菜单项会关闭Sheet.