前言

隨著Qt版本的不斷升級，現在用QML做移動開發越來越方便，并且代碼也非常簡潔容易理解，Android原生開發中的材料設計界面很普遍，很多軟件都是走這個風格設計，并且隨著Android開發很多開源代碼不斷的共享，使得用原生開發Android程序變得越來越簡單并且還越來越漂亮，而QML中其實也有，只是沒那么成熟，并且風格也沒有Android原生開發的那么漂亮。

正文

今天要做的是關于QML的ListView控件懸浮標題欄，有點模仿Android原生開發中的界面形式，先來看看效果圖。

（由于上傳的圖片限制大小，所以沒有錄制太長時間）
來看看源碼

import QtQuick 2.6 import QtQuick.Window 2.2 import QtQuick.Controls 2.1Window {id:mainwindowvisible: truewidth: 400height: 600Rectangle{id:titlebarvisible: truewidth: parent.widthheight: 50z:3opacity: 0color:"red"Item{id:itemanchors.fill: parentopacity:1Label{anchors.centerIn: parenttext:"hello world!!"font.pixelSize: 27}}}NumberAnimation {id:ani1target: viewproperty: "contentY"duration: 200to:-view.headerItem.heightrunning: falseeasing.type: Easing.InOutQuad}NumberAnimation {id:ani2target: viewproperty: "contentY"duration: 200to:-titlebar.heightrunning: falseeasing.type: Easing.InOutQuad}ListView{id:viewanchors.fill: parentmodel:20onContentYChanged:{if(view.contentY < -titlebar.height){titlebar.opacity = 1-(-view.contentY - titlebar.height)/100.titlebar.y = -view.contentY - titlebar.height}else{item.opacity = 1titlebar.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.widthheight: 150color:"red"Label{id:labeltext:"this is header"font.pixelSize: 27color:"white"anchors.horizontalCenter: parent.horizontalCenteranchors.top: parent.topanchors.topMargin: 30}}delegate:Rectangle{id:delegatewidth: view.widthheight: 50border.width: 1Label{anchors.fill: parenttext: index}}footer: Rectangle{id:footwidth: parent.width}Component.onCompleted: {var t_h = view.model.count * 50 + titlebar.heightif(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:listModelonCountChanged: {var t_h = count * delegate.height + titleBar.heightif(t_h < listView.height){listView.footerItem.height = listView.height - t_h}}}

代碼很簡單，不再贅述。

總結

以上是生活随笔為你收集整理的QML ListView悬浮标题栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。