qml实现幻灯片

qml 实现幻灯片思路

先看视频吧~

qml实现幻灯片

实现的思路如下：

写好幻灯片控件

先写一个幻灯片控件 Page.qml，不一定要跟下面一样，但是至少要有类似的页面加载信号和离开信号。

import QtQuick 2.0

Rectangle{
    id: page
    color:"transparent"

    signal clicked
    signal loaded
    signal exited

    property string title
    MouseArea{
        anchors.fill: parent
        onClicked: page.clicked()
    }

    Component.onCompleted: page.loaded();

    property var animations: []
    property int currentAnimation: -1

    function nextAnimation(){
        if(currentAnimation +1 <= animations.length-1){
            animations[++currentAnimation].start();
        }
    }

    function previousAnimation(){
        if(animations.length != 0){
            animations.pop().start();
            if(currentPage-1 >= 0)
                --currentPage;
        }
    }
}

这个幻灯片控件内部有一个动画序列，可以执行幻灯片内每一个元素的动画。

写好每一页的内容

接着使用 Page 控件，把你的每一页幻灯片做好，按顺序起名为 Page0 到 PageEnd。怎么起名随便你，只要知道顺序就好。

例如 Page0.qml 可以这么写

import QtQuick 2.0

Page {

    id: page2
    property int fontSize: 40
    title: "目录"

        Text{
            id: text1
            color :"white"
            text: "自我介绍"
            font.family: "微软雅黑"
            font.pointSize: fontSize
            opacity: 0
            anchors.centerIn: parent;

            ParallelAnimation {
                id: animation1

                PropertyAnimation {
                    target: text1
                    property: "rotation"
                    from: 0
                    to: 360
                }

                PropertyAnimation {
                    target: text1
                    property: "opacity"
                    from: 0
                    to: 1
                }
            }
        }

    onClicked: {
        nextAnimation();
    }

    onLoaded: {
        animations.push(animation1);
    }
}

这个页面添加了一个内容，然后为这个内容制定了一个动画。然后把动画添加到动画序列中去，再每点击页面一次，就执行动画序列。

将写好的幻灯片按序添加到页面栈中

StackView{
    id: view

    initialItem: page1
    property int currentPage: 0;

    function nextPage(){
        if(currentPage < pages.length-1){
            view.currentItem.exited()
            view.push({item: pages[++currentPage]});
        }

    }

    function previouPage(){
        view.currentItem.exited()
        view.pop()
        if(currentPage-1 >= 0)
            --currentPage;
    }
    property list<Page> pages: [
        Pages.Page01{
            id: page1
        },
        Pages.Page02{
            id: page2
        },
        Pages.Page03{
            id: page3
        },
        Pages.Page04{
            id: page4
        },
        Pages.Page05{
            id: page5
        },
        Pages.PageEnd{
            id: end
        }

    ]
}

页面入栈的形式可以像上面那样，先生成，也可以动态生成在压栈。

关于动画和过度

自己去琢磨吧，在 ppt 中用烂的动画和过度大概不过是选择和平滑了吧~

例子下载