BB10 Cascades: 为页面添加菜单项

在设计手机移动应用的时候，需要尽量利用手机有限的屏幕，为了不让按钮占用太多空间，我们可以使用菜单项替代按钮，将用户需要执行的操作集中到菜单上。

BB10 Cascades QML中可以为页面（page）添加“ActionItem”组件，“ActionItem”组件将出现在屏幕下方的操作条中，或者出现在菜单栏里，具体是出现在哪里由开发人员通过ActioniItem的ActionBar.placement属性来指定。

 

为了给页面添加ActionItem，需要在页面中添加actions属性，格式如下：

 

// Default empty project templateimport bb.cascades 1.0// creates one page with a labelPage {    Container { //这里添加我们页面中需要的组件            }    //这里开始action的定义    actions: [        ActionItem {  //第一个item            title: "Action 1" //item 的文字            ActionBar.placement: ActionBarPlacement.OnBar //item的摆放位置，缺省放在菜单了，加了这行就放屏幕下方的操作条里            onTriggered: {  //点击触发的事件                myLabel.text = "Action 1 selected!"            }        },        ActionItem {  //第二个item....            title: "Action 2"                        onTriggered: {                myLabel.text = "Action 2 selected!"            }        }    ]}

 

以上添加的菜单项（ActionItem）执行的操作是改变myLabel组件的文字，这里还是使用之前的"Hello World"样例为基础，所以myLabel指向“Hello World”标签。

所以以下语句将“Hello World”标签修改成“Action 1 selected!”:

myLabel.text="Action 1 selected!"

为页面添加菜单项后可以在QML预览界面看到菜单项的效果，虽然不能点击测试，不过可以预先查看菜单项的静态效果，见下图：

 

下面是应用进行测试时在模拟器上显示的效果，用户点击“Action1”可以将“Hello World”标签的文字修改为“Action 1 selected!”:

 

下面是用户点击操作条右方“更多..”按钮菜单的效果：