QML ListView悬浮标题栏

前言

随着Qt版本的不断升级，现在用QML做移动开发越来越方便，并且代码也非常简洁容易理解，Android原生开发中的材料设计界面很普遍，很多软件都是走这个风格设计，并且随着Android开发很多开源代码不断的共享，使得用原生开发Android程序变得越来越简单并且还越来越漂亮，而QML中其实也有，只是没那么成熟，并且风格也没有Android原生开发的那么漂亮。

正文

今天要做的是关于QML的ListView控件悬浮标题栏，有点模仿Android原生开发中的界面形式，先来看看效果图。

（由于上传的图片限制大小，所以没有录制太长时间）
来看看源码

import QtQuick 2.6import QtQuick.Window 2.2import QtQuick.Controls 2.1Window {    id:mainwindow    visible: true    width: 400    height: 600    Rectangle{        id:titlebar        visible: true        width: parent.width        height: 50        z:3        opacity: 0        color:"red"        Item{            id:item            anchors.fill: parent            opacity:1            Label{                anchors.centerIn: parent                text:"hello world!!"                font.pixelSize: 27            }        }    }    NumberAnimation {        id:ani1        target: view        property: "contentY"        duration: 200        to:-view.headerItem.height        running: false        easing.type: Easing.InOutQuad    }    NumberAnimation {        id:ani2        target: view        property: "contentY"        duration: 200        to:-titlebar.height        running: false        easing.type: Easing.InOutQuad    }    ListView{        id:view        anchors.fill: parent        model:20        onContentYChanged:{            if(view.contentY < -titlebar.height){                titlebar.opacity = 1-(-view.contentY - titlebar.height)/100.                titlebar.y = -view.contentY - titlebar.height            }            else{                item.opacity = 1                titlebar.y = 0            }        }        onMovementEnded: {            if(view.contentY < -view.headerItem.height/2.){                ani1.running = true            }            else if(view.contentY < -titlebar.height){                ani2.running = true            }        }        header:Rectangle{            width: view.width            height: 150            color:"red"            Label{                id:label                text:"this is header"                font.pixelSize: 27                color:"white"                anchors.horizontalCenter: parent.horizontalCenter                anchors.top: parent.top                anchors.topMargin: 30            }        }        delegate:Rectangle{            id:delegate            width: view.width            height: 50            border.width: 1            Label{                anchors.fill: parent                text: index            }        }        footer: Rectangle{            id:foot            width: parent.width        }        Component.onCompleted: {            var t_h = view.model.count * 50 + titlebar.height            if(t_h < view.height){                view.footerItem.height = view.height - t_h            }        }        ScrollIndicator.vertical: ScrollIndicator { }    }}

这里是用了ListView和Rectangle组合起来实现的，首先用Rectangle来实现一个悬浮标题栏并设置为不可见，而ListView添加了一个header用于做列表的大标题栏，当滑动列表的时候控制悬浮标题栏的透明度以及位置。这里还添加了一个footer，这个主要是用于在列表数量比较少的情况下通过footer来设置高度 然后可以控制列表滑动，而footer的高度应该是在ListView的Model数量变化的时候动态改变，这里测试代为了简单，我写了固定的model数量，实际情况下应该检测model数量变化来改变footer的高度。比如说

model:ListModel{            id:listModel            onCountChanged: {                var t_h = count * delegate.height + titleBar.height                if(t_h < listView.height){                    listView.footerItem.height = listView.height - t_h                }            }        }

代码很简单，不再赘述。