在设计手机移动应用的时候,需要尽量利用手机有限的屏幕,为了不让按钮占用太多空间,我们可以使用菜单项替代按钮,将用户需要执行的操作集中到菜单上。
BB10 Cascades QML中可以为页面(page)添加“ActionItem”组件,“ActionItem”组件将出现在屏幕下方的操作条中,或者出现在菜单栏里,具体是出现在哪里由开发人员通过ActioniItem的ActionBar.placement属性来指定。
为了给页面添加ActionItem,需要在页面中添加actions属性,格式如下:
// Default empty project template
import bb.cascades 1.0
// creates one page with a label
Page {
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!”:
下面是用户点击操作条右方“更多..”按钮菜单的效果: