qml实现幻灯片

qml 实现幻灯片思路

先看视频吧~

qml实现幻灯片

实现的思路如下：

写好幻灯片控件

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

import QtQuick 2.0Rectangle{    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.0Page {    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 中用烂的动画和过度大概不过是选择和平滑了吧~

例子下载