在BB10 Cascades编程过程中,应用界面可以通过QML来编写,使用比较方便。

QML中我们可以使用各种组件,其中最简单的就是Label了,通过它可以在一个页面或者容器中添加一个文本标签。

 

在之前我们看到的Cascades Hello样例中就使用了Label来显示“Hello World”字样,新版本Cascades中的Hello 样例稍有不同,我们来看看新版的Hello 应用mail.qml中的QML代码:

// Default empty project template
import bb.cascades 1.0

// creates one page with a label
Page {
    Container {
        layout: DockLayout {}
        Label {
            text: qsTr("Hello World")
            textStyle.base: SystemDefaults.TextStyles.BigText
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
        }
    }
}


以上代码在一个Container中添加了一个Label组件,在Cascades环境中可以通过QML预览器打开查看效果。

如果开发者希望在以上Container中添加一个label组件,可以在左下角中找到Label组件,通过鼠标拖拽到mail.qml编辑页面中。添加了Label组件后就可以在右方的“QML Properties”页面中设置这个组件的属性了,包括id是什么,文字内容是什么等,操作界面见下图:

 

接着,点击QML编辑器上方的“Horinzontal Split Mode”按钮(见下图红色圈中的地方),就可以分左右两边看QML代码和预览效果,因为没有设置对齐方式,我们新添加的“New Label”就出现在预览屏幕的左上方。

 

然后, 有关Label中字体的颜色,大小,对齐方式等都可以在“QML Properties”中设置,其中颜色,大小在“Appearance”区段进行设置,对齐方式可以在“Layout”区段进行设置。所有这些设置都像word中的操作一样,点击后就生效,开发者可以直接在QML预览界面中看到效果。

 

有关对齐方式,因为涉及到QML中的布局管理器,我们在以后的文章中详细讨论。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐