BB10 Cascades: QML中Sheet页面的使用

 在编写手机程序的时候，往往一个页面是不够用的，一般应用都需要包括多个页面。在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.