QML ListView悬浮标题栏

前言

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

正文

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

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

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Window {
    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
                }
            }
        }

代码很简单，不再赘述。