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.1
import Qt.labs.settings 1.0

Window {
    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.1
import Qt.labs.settings 1.0

Window {
    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.4
import QtQuick.Window 2.0

QtObject {
    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

你可能感兴趣的:(android,qt,引导页)