前言

隨著Qt版本的不斷升級(jí)，現(xiàn)在用QML做移動(dòng)開(kāi)發(fā)越來(lái)越方便，并且代碼也非常簡(jiǎn)潔容易理解，Android原生開(kāi)發(fā)中的材料設(shè)計(jì)界面很普遍，很多軟件都是走這個(gè)風(fēng)格設(shè)計(jì)，并且隨著Android開(kāi)發(fā)很多開(kāi)源代碼不斷的共享，使得用原生開(kāi)發(fā)Android程序變得越來(lái)越簡(jiǎn)單并且還越來(lái)越漂亮，而QML中其實(shí)也有，只是沒(méi)那么成熟，并且風(fēng)格也沒(méi)有Android原生開(kāi)發(fā)的那么漂亮。

正文

今天要做的是關(guān)于QML的ListView控件懸浮標(biāo)題欄，有點(diǎn)模仿Android原生開(kāi)發(fā)中的界面形式，先來(lái)看看效果圖。

（由于上傳的圖片限制大小，所以沒(méi)有錄制太長(zhǎng)時(shí)間）
來(lái)看看源碼

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組合起來(lái)實(shí)現(xiàn)的，首先用Rectangle來(lái)實(shí)現(xiàn)一個(gè)懸浮標(biāo)題欄并設(shè)置為不可見(jiàn)，而ListView添加了一個(gè)header用于做列表的大標(biāo)題欄，當(dāng)滑動(dòng)列表的時(shí)候控制懸浮標(biāo)題欄的透明度以及位置。這里還添加了一個(gè)footer，這個(gè)主要是用于在列表數(shù)量比較少的情況下通過(guò)footer來(lái)設(shè)置高度 然后可以控制列表滑動(dòng)，而footer的高度應(yīng)該是在ListView的Model數(shù)量變化的時(shí)候動(dòng)態(tài)改變，這里測(cè)試代為了簡(jiǎn)單，我寫(xiě)了固定的model數(shù)量，實(shí)際情況下應(yīng)該檢測(cè)model數(shù)量變化來(lái)改變footer的高度。比如說(shuō)

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

代碼很簡(jiǎn)單，不再贅述。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。