BB10 Cascades: QML中Label的使用。

在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中的布局管理器，我们在以后的文章中详细讨论。