在qt中構(gòu)建界面時經(jīng)常會對多個數(shù)據(jù)進(jìn)行排列顯示，可以使用qml提供的ListView組件來快速的構(gòu)建一個列表模型來進(jìn)行列表內(nèi)容的分組顯示；
通常的步驟是定義一個簡單的ListView列表。創(chuàng)建一個Model并填入數(shù)據(jù)到其中；
Rectangle {
id:rootRect;
width:600;
height:200;
color:"grey";
ListView {
id:listView;
width:parent.width;
height:parent.height;
clip:true; //對超出劃定邊界的數(shù)據(jù)進(jìn)行裁剪
delegate：modelItem; //自定義列表內(nèi)容的組件，屬性是Component
//構(gòu)建一個Model，也可以直接引入c++中的創(chuàng)建的model 運(yùn)行程序可已看到生成了一個包含name,age,Heigth的列表
model:ListModel {
id: listModel;
ListElement {
name:"jack";
age: "22";
Height: "188cm"
}
ListElement {
name:"mark";
age:"19";
Height:"178cm";
}
ListElement {
name:"zhangsan";
age:"17";
Height:"177cm";
}
ListElement {
name:"lisi";
age:"27";
Height:"167cm";
}
ListElement {
name:"xiaoxiao";
age:"25";
Height:"18";
}
}
}
Component {
id:modelItem;
Rectangle {
width:parent.width;
height:40;
color: "grey"
Row {
width:0.9*parent.width;
anchors.left: parent.left;
anchors.leftMargin: 0.1*parent.width;
height:parent.height;
Label {
text: name;
font.pixelSize: 20;
width: 0.3*parent.width;
anchors.verticalCenter: parent.verticalCenter;
verticalAlignment: Text.AlignHCenter;
}
Label {
text: age;
font.pixelSize: 20;
width: 0.3*parent.width
anchors.verticalCenter: parent.verticalCenter;
verticalAlignment: Text.AlignHCenter;
}
Label {
text: Height;
font.pixelSize: 20;
width: 0.3*parent.width
anchors.verticalCenter: parent.verticalCenter;
verticalAlignment: Text.AlignHCenter;
}
}
}
}
}
以上的內(nèi)容在qt運(yùn)行顯示的是一個基礎(chǔ)的列表，但是一眼望去并不明確每一項(xiàng)的具體含義, 這樣在一些使用過程中很不方便：具體的顯示效果如下：
可以通過鼠標(biāo)移動或者滾輪滑動查看列表的顯示，但是對每一項(xiàng)的含義不是那么的直觀，也有一種方法就是直接在model也就是列表的index為1的時候添加每一列的名稱進(jìn)去，顯示的時候可以看到每一列的名稱，具體代碼如下，只需在model的第一列添加如下代碼到最前面：（修改后的model如下）
model:ListModel {
id: listModel;
ListElement {
name:"name";
age:"age";
Height:"height";
}
ListElement {
name:"jack";
age: "22";
Height: "188cm"
}
ListElement {
name:"mark";
age:"19";
Height:"178cm";
}
ListElement {
name:"zhangsan";
age:"17";
Height:"177cm";
}
ListElement {
name:"lisi";
age:"27";
Height:"167cm";
}
ListElement {
name:"xiaoxiao";
age:"25";
Height:"181cm";
}
ListElement {
name:"huahua";
age:"38";
Height:"188cm"
}
}
效果展示：
可以看到第一行有顯示每一列數(shù)據(jù)的名字了，但是因?yàn)樵O(shè)置的字體顯示與后面一致（可以單獨(dú)對某一個index的item設(shè)置不同的參數(shù)來突出顯示，這里不做過多說明），而且會隨著滑動，而且數(shù)據(jù)多了會滑動消失，所以不推薦使用；
在qml中，可以ListView的特性創(chuàng)建一個列表頭，顯示每一項(xiàng)的具體含義；表頭header的屬性和delegate一樣也是Component；通過自定義表頭的組件顯示到列表最上面；
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.4
Window {
id: window
width: 640
height: 200
visible: true
title: qsTr("Hello World")
//qml ListView組件
/*
定義一個簡單的ListView列表,并創(chuàng)建一個Model填入數(shù)據(jù)，運(yùn)行程序可已看到生成了一個包含name,age,Heigth但是一眼望去并不明確每一項(xiàng)的具體含義；
利用ListView的特性創(chuàng)建一個列表頭，顯示每一項(xiàng)的具體含義；表頭header的屬性和delegate一樣也是Component；
*/
Rectangle {
id:rootRect
width:parent.width;
height:parent.height;
color: "darkgrey";
ListView {
id:listView;
width:parent.width;
height:parent.height;
clip: true; //超出邊界的數(shù)據(jù)進(jìn)行裁剪
delegate:modelItem;
header:headerView;//只構(gòu)建表頭上滑動時表頭也會跟隨上滑動消失
headerPositioning: ListView.OverlayHeader;//枚舉類型
/*
ListView.OverlayHeader: 向上滑動直接覆蓋表頭
ListView.InlineHeader:表頭和內(nèi)容是放置在一起的，移動也是一起移動，默認(rèn)設(shè)置此屬性；
ListView.PullBackHeader:表頭和內(nèi)容是可以分開，向上滑動會頂上去看不見
*/
//構(gòu)建一個Model
model:ListModel {
id: listModel;
ListElement {
name:"jack";
age: "22";
Height: "188cm"
}
ListElement {
name:"mark";
age:"19";
Height:"178cm";
}
ListElement {
name:"zhangsan";
age:"17";
Height:"177cm";
}
ListElement {
name:"lisi";
age:"27";
Height:"167cm";
}
ListElement {
name:"xiaoxiao";
age:"25";
Height:"18";
}
}
}
Component {
id:headerView;
Rectangle {
width:parent.width;
height: 40;
color: "lightgrey";
z:2;//將表頭的z坐標(biāo)設(shè)置在上層，表頭在設(shè)置屬性為overlayHeader時就不會隨滑動而消失，始終顯示在最上面
Row {
width: 0.9*parent.width;
height: parent.height;
anchors.left: parent.left;
anchors.leftMargin: 0.1*parent.width;
Label {
text: "name";
font.pixelSize: 20;
width: 0.3*parent.width;
anchors.verticalCenter: parent.verticalCenter;
verticalAlignment: Text.AlignHCenter;
}
Label {
text: "age";
font.pixelSize: 20;
width: 0.3*parent.width
anchors.verticalCenter: parent.verticalCenter;
verticalAlignment: Text.AlignHCenter;
}
Label {
text: "Height";
font.pixelSize: 20;
width: 0.3*parent.width
anchors.verticalCenter: parent.verticalCenter;
verticalAlignment: Text.AlignHCenter;
}
}
}
}
Component {
id:modelItem;
Rectangle {
width:parent.width;
height:40;
color: "grey"
Row {
width:0.9*parent.width;
anchors.left: parent.left;
anchors.leftMargin: 0.1*parent.width;
height:parent.height;
Label {
text: name;
font.pixelSize: 20;
width: 0.3*parent.width;
anchors.verticalCenter: parent.verticalCenter;
verticalAlignment: Text.AlignHCenter;
}
Label {
text: age;
font.pixelSize: 20;
width: 0.3*parent.width
anchors.verticalCenter: parent.verticalCenter;
verticalAlignment: Text.AlignHCenter;
}
Label {
text: Height;
font.pixelSize: 20;
width: 0.3*parent.width
anchors.verticalCenter: parent.verticalCenter;
verticalAlignment: Text.AlignHCenter;
}
}
}
}
}
}
如果表頭還是會隨著滑動消失，可以設(shè)置組件的z軸，讓該組件顯示在最上層，達(dá)到表頭一直顯示的效果；特別要注意的是需要設(shè)置ListView的headerPositioning的屬性為ListView.OverlayHeader這個類型（三個類型的描述在代碼里有注釋），這個是向上滑動覆蓋表頭，但是因?yàn)楸眍^的z軸設(shè)置的是最上層，所以并不會被覆蓋，以此達(dá)到表頭顯示的效果。
以上的header添加后就可以在顯示一個帶表頭的列表，并且列表滑動表頭不會隨著列表滑動，始終顯示在最上方。實(shí)現(xiàn)效果顯示如下：
可以看到表頭一直顯示到最上方，且不會隨滑動消失。
還有一個問題就是一個點(diǎn)擊穿透的問題，上滑后點(diǎn)擊表頭會觸發(fā)列表內(nèi)容的點(diǎn)擊，如果有監(jiān)控對列表的點(diǎn)擊操作時點(diǎn)擊表頭就會造成誤操作，這里就需要做一個放穿透效果，即在表頭的組件中加上以下代碼：文章來源：http://www.zghlxwxcb.cn/news/detail-515222.html
MouseArea {
anchors.fill: parent;
onPressed: {
mouse.accepted = true;
}
}
如上所述。文章來源地址http://www.zghlxwxcb.cn/news/detail-515222.html
到了這里，關(guān)于【QT】QML—— ListView添加固定表頭的方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
