Sailfish应用开发入门(四)ApplicationWindow与Cover

一、Sailfish Silica 基于QT Quick提供了Sailfish的UI界面。每个Sailfish 引用必须定义为一个Qt C++应用项目,在项目里使用QDeclarativeView加载应用UI。

#include 
#include 

#include "sailfishapplication.h"

Q_DECL_EXPORT int main(int argc, char *argv[])
{
    QScopedPointer app(Sailfish::createApplication(argc, argv));
    QScopedPointer view(Sailfish::createView("main.qml"));
    
    Sailfish::showView(view.data());
    view->showFullScreen();
    return app->exec();
}

二、Sailfish是多任务系统,所有的应用都有两种状态:Active和Background
        Active:占用所有可用屏幕
        Backgroud:准备显示到主屏幕(home screen)

       我们可以使用ApplicationWindow.applicationActive属性获取应用状态,当应用在前台运行则状态为true,如果在后台运行则状态为false.
       注:在后台运行的应用必须保证最小资源占用。例如所有的资源必须暂停,并且释放无用的资源。

import QtQuick 1.1
import Sailfish.Silica 1.0
import "pages"

ApplicationWindow
{
    initialPage: Page {
        Label {
            text: "Hello Micky!"
            anchors.centerIn: parent
            RotationAnimation on rotation {
                from: 0
                to: 360
                duration: 2000
                loops: Animation.Infinite
                running: applicationActive
            }
        }
    }
}

        Sailfish OS中所有运行中的的应用均可以在主界面以“Cover”的形式显示。当一个应用被移到后台运行后Cover将自动被创建并且显示。通过ApplicationWindow.cover属性获取应用cover。这个属性应该被设置在组件上让cover显示在homescreen,通常还需要显示应用当前的状态。应用可以基于状态的改变更新cover,无论如何不应该在cover上显示动画。当应用转到前台运行时,cover会被自动隐藏。
        一个应用应该总是具备cover。Sailfish OS中所有运行中的的应用均可以在主界面以“Cover”的形式显示。当一个应用被移到后台运行后Cover将自动被创建并且显示。通过ApplicationWindow.cover属性获取应用cover。这个属性应该被设置在组件上让cover显示在homescreen,通常还需要显示应用当前的状态。应用可以基于状态的改变更新cover,无论如何不应该在cover上显示动画。当应用转到前台运行时,cover会被自动隐藏。
        CoverActionList用于设置cover action.
一个应用应该总是具备cover。     
官方示例:

 CoverActionList {
     enabled: mode == "music"
     CoverAction {
         iconSource: player.playing ? "pause.png" : "play.png"
         onTriggered: player.togglePlaying()
     }
     CoverAction {
         iconSource: "next.png"
         onTriggered: player.nextSong()
     }
 }

 三、ApplicationWindow是Sailfish应用最顶层的组件。每个Sailfish应用都必须有且仅有一个ApplicationWindow组件定义在ui的root层,它是app的入口。
       主要功能:
            1、管理app里的page
            2、设置app的active cover page
            3、设置app背景图片
            4、处理横竖屏切换
        大多数application window 包含一个initialPage,用于指定app被打开的时候显示的page。

        每个application window都包含一个page stack,通过访问pageStack属性,可以决定app显示的页面。page stack由page对象组成,每一个page包含了在某个时刻显示的内容。一个page能够被添加到stack,或者从stack里移除。app 正在显示的页面就是page stack最后一个被添加进的page。

        如以下代码,应用被打开的时候显示一个按钮,当按钮被点击后切换到显示AnotherPage.qml的内容.

// main.qml
 import QtQuick 1.1
 import Sailfish.Silica 1.0

 ApplicationWindow {
     initialPage: Component {
         Page {
             Button {
                 text: "Ahoy!"
                 onClicked: pageStack.push("AnotherPage.qml")
             }
         }
     }
 }

       每个Sailfish app都能通过cover属性定义自己的active cover,当应用在后台运行时,active cover会显示在home screen界面。

ApplicationWindow {
     initialPage: Component { MyPage {} }
     cover: Component { MyCover {} }
 }

        在app中开发者可以使用allowedOrientations设置是否能进行横竖屏切换。
        ApplicationWindow的属性:
            allowedOrientations : enumeration
                  • Orientation.Portrait
                  • Orientation.Landscape
                  • Orientation.PortraitInverted
                  • Orientation.LandscapeInverted
                  • Orientation.All
         applicationActive : bool
              当应用在前台运行时为true, 当应用在后台运行并且cover被显示的时候为false。

         bottomMargin : real

         contentItem : Item
              包含在application window内部的子item。

         deviceOrientation : enumeration
               改变屏幕方向,属性值同allowedOrientations的前四个类型。

         orientation : enumeration
               屏幕方向

         initialPage : variant

         pageStack : PageStack

         cover : variant

         screenRotation : real

    ApplicationWindow方法:
           ApplicationWindow::activate ()
                     让app在前台运行
           ApplicationWindow::deactivate ()
                     让app运行在后台,并且最小化app作为active cover显示在home界面上。

ApplicationWindow {
     initialPage: Component { MyPage {} }
     cover: Component { MyCover {} }
 }

     接下来,就写一个关于cover的例子:

      Sailfish应用开发入门(四)ApplicationWindow与Cover_第1张图片

//main.qml
import QtQuick 1.1
import Sailfish.Silica 1.0
import "pages"

ApplicationWindow
{
    initialPage: Page {
        id: mainPage
        Image {
            anchors.fill: parent
            source: "images/page_bg.png"
            fillMode: Image.PreserveAspectCrop
            smooth: true
        }

        Label {
            anchors.horizontalCenter: mainPage.horizontalCenter
            text: "Sailfish 晚上好"
            color: "red"
            font.family: theme.fontFamilyHeading
        }
    }
    cover: Qt.resolvedUrl("cover/CoverPage.qml")
}


 

//CoverPage.qml
import QtQuick 1.1
import Sailfish.Silica 1.0

Rectangle {
    anchors.fill: parent
    color: "red"

    Image {
        anchors.fill: parent
        source: "../images/cover_bg.png"
    }

    Label {
        id: label
        anchors.centerIn: parent
        color: "blue"
        text: "喝醉的毛毛虫"
    }
    
    CoverActionList {
        id: coverAction
        
        CoverAction {
            iconSource: "../images/a.png"
            onTriggered: console.log("Clicked on a")
        }
        
        CoverAction {
            iconSource: "../images/b.png"
            onTriggered: console.log("Clicked on b")
        }
    }
}


         运行效果,如下图

          Sailfish应用开发入门(四)ApplicationWindow与Cover_第2张图片

          回到Home界面后,如下图:

          Sailfish应用开发入门(四)ApplicationWindow与Cover_第3张图片

          如果有朋友跟我一样的代码编译运行,也许就会发现一个问题:        

    libEGL warning: DRI2: failed to authenticate
    file:///opt/sdk/share/test2/main.qml:8:9: QML Image: Cannot open: file:///opt/sdk/share/test2/images/page_bg.png
    Warning: specifying an object instance for initialPage is sub-optimal - prefer to use a Component

         一看这警告信息就知道找不到图片资源,这是因为Qt Creator在编译、运行代码的时候没有把图片upload到Emulator的"/opt/shared/sdk/test2"目录下,使用winscp或puty查看Emulator 目录(Puty, WinSCP使用请参考 http://blog.csdn.net/liuhongwei123888/article/details/8877436),果然如此,看下图:

         Sailfish应用开发入门(四)ApplicationWindow与Cover_第4张图片

        接下来只要把项目中国的images目录upload到"/opt/shared/sdk/test2"目录下就可以了。

        对于为什么没把图片资源upload到Emulator里,本人现在也不太清楚,若有高手知道,请告知,在这先谢过。

 


 

你可能感兴趣的:(Sailfish)