BB10 Cascades: ActivityIndicator的使用

 ActivityIndicator是QML中的活动指示器，用于表示后台在工作中，让用户等待，相当于是我们Windows上常见的沙漏图标。

一般情况下，当我们有程序在后台运行进行处理，处理过程不能马上完成时，我们会使用ActivityIndicator显示活动指示器，让用户等待。需要注意的是，如果后台程序需要比较长得时间才能完成，我们会建议使用进度条，而不是活动指示器，有关进度条我们在后面的博文中再详细讨论。

 BB10 Cascades中的活动指示器显示效果如下图，现实使用时显示的图标会不停转动。使用这个组件的好处是我们不要另外起一个线程完成图标的重绘工作，该组件会自动进行重绘，我们需要完成的工作就是调用ActivityIndicator的start方法就可以了。 

 

当我们需要在一个QML页面添加一个ActivityIndicator时，可以直接从BB10 Cascades开发环境左下角的控件栏中将ActivityIndicator控件拖拽到QML页面中。

有关ActivityIndicator的位置和大小我们可以完全按照一般QML控件的方式进行设置，下面是一个ActivityIndicator的样例，该控件高200像素，宽200像素，摆放在屏幕的中央 

 

ActivityIndicator {
            id: myActivity
            running: false
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
            preferredWidth: 200.0
            preferredHeight: 200.0
        }

当我们需要显示一个活动指示器时，只需要将它的running属性设置为true即可，像下面的按钮点击事件中的代码一样：
 

Button {
                        text: "Start It"
                onClicked: {
                    myActivity.running=true;
                }
            }

 

 当我们需要停止一个活动指示器时，只需要将它的running属性设置为false即可，像下面的按钮点击事件中的代码一样。

一旦一个活动指示器的running属性被设置为false，它会自动消失，我们不需要考虑如何隐藏它。

Button {
                text: "Stop it"
                onClicked: {
                    myActivity.running=false;
                }
            }

 

下面是测试样例的运行效果，点击“Start It”按钮显示活动指示器，而点击“Stop it”按钮停止活动指示器

 

 

 下面是完整的样例代码：

 

// Default empty project template
import bb.cascades 1.0

// creates one page with a label
Page {
    Container {
        layout: DockLayout {}
        Container {
            horizontalAlignment: HorizontalAlignment.Center
            Button {
                        text: "Start It"
                onClicked: {
                    myActivity.running=true;
                }
            }
            Button {
                text: "Stop it"
                onClicked: {
                    myActivity.running=false;
                }
            }
        }
        
        
        ActivityIndicator {
            id: myActivity
            running: true
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
            preferredWidth: 200.0
            preferredHeight: 200.0
        }
    }
}