Qt For Android 引导页

引导页

引导页的作用大体如下：

1. 介绍应用或者介绍新特性

2. 比 SplashScreen 更多的信息

3. 进行交互式引导

特点是：

在应用某个版本第一次启动时显示，下次启动不显示。在应用进行更新或者降级后，仍然会进行展示。

这里只提供使用 QML 的实现方式，其他实现方式可自行搜索。

记录应用启动次数

Settings 类似于 C++ QSettings 。但是使用更方便。

参考 生成一个 Qt on Android 项目，我们一定要在 C++ 设置应用的应用名，组织名，以及域名。

#include <QApplication>#include <QQmlApplicationEngine>int main(int argc, char *argv[]){    QApplication app(argc, argv);    app.setApplicationName("Guide");    app.setOrganizationName("GDPURJYFS");    app.setOrganizationDomain("github.com/GDPURJYFS");    app.setApplicationVersion("0.1.2");    QQmlApplicationEngine engine;    engine.load(QUrl(QStringLiteral("qrc:/qml/Guide/main.qml")));    return app.exec();}

然后才可以在 QML 中使用如下语句。

import QtQuick.Window 2.1import Qt.labs.settings 1.0Window {    id: window    width: 800    height: 600    Settings {        property alias x: window.x        property alias y: window.y        property alias width: window.width        property alias height: window.height    }}

上面示例，在调整应用窗体大小关闭在重启，可以恢复到之前的大小。

用这个 Settings 可以记录应用程序开启的次数。

虽然使用数据库更好，但是相对于 Settings 来说，太复杂了。

记录程序启动次数如下：

import QtQuick.Window 2.1import Qt.labs.settings 1.0Window {    id: window    property int openApplicationCount: 0    width: 800    height: 600    Settings {        property alias openApplicationCount: window.openApplicationCount    }    // 应用启动一次，就加载此页面一次，就记录一次启动。    Component.onCompleted: window.openApplicationCount++;  }

这样就可以简单的记录应用启动的次数了。

实现

在 SplashScreen 已经说明了，QML 实现的 SplashScreen 更适合做为引导页。

一般需要设置 modality,flags,visibility，添加一个信号，提示引导完成。

Window {    id: guide    signal guideFinished()    title: qsTr("Guide")    visible: true    color: "transparent"    modality: Qt.ApplicationModal    flags: Qt.SplashScreen    visibility: Window.FullScreen

内部使用一个滚动方向设置为水平的 ListView 作为引导视图。

    ListView {        id: guideView        anchors.fill: parent        highlightRangeMode: ListView.StrictlyEnforceRange        snapMode: ListView.SnapOneItem        boundsBehavior: ListView.StopAtBounds        orientation: ListView.Horizontal

使用 VisualItemModel 存放引导页面。

    VisualItemModel {        id: guidePages        Rectangle {            width: guide.width            height: guide.height            color: "red"            Text{                anchors.centerIn: parent                font.family: "微软雅黑"                text: guide.openApplicationCount            }        }        Rectangle {            width: guide.width            height: guide.height            color: "blue"        }        Rectangle {            width: guide.width            height: guide.height            Button{                anchors.centerIn: parent                text: "Guide Finished"                onClicked: {                    guideFinished();                }            }        }    }

别忘记和 Settings 配合使用。

    property int openApplicationCount: 0    Settings {        property alias openApplicationCount: guide.openApplicationCount    }    ......    Component.onCompleted: {        guide.openApplicationCount++;    }

入口 QML 文件如下：

import QtQuick 2.4import QtQuick.Window 2.0QtObject {    id: main    property var guide: Guide {        id: _guide    }    property var mainWindow: MainWindow {        id: _mainWindow        visible: false    }    Component.onCompleted: {//        if(_guide.openApplicationCount > 0) {//            _mainWindow.visible = true;//            _guide.destroy();//        }        _guide.guideFinished.connect(function(){            _guide.guideFinished.disconnect(arguments.callee);            _mainWindow.visible = true;            _guide.destroy();        });    }}

实际上，看起来代码很多，但是在设计和使用的时候更具灵活性。可以添加动画，粒子特效，3D 特效到引导页面中。

---

本文章来自本人 github 项目A-week-to-develop-android-app-plan