【QT】QML—— ListView添加固定表头的方法

已于 2023-01-04 22:36:57 修改
阅读量3.2k 收藏 4
点赞数 1
分类专栏： QT 文章标签： qt ui 开发语言
于 2023-01-02 21:52:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45054387/article/details/128525361
版权

在qt中构建界面时经常会对多个数据进行排列显示，可以使用qml提供的ListView组件来快速的构建一个列表模型来进行列表内容的分组显示；
通常的步骤是定义一个简单的ListView列表。创建一个Model并填入数据到其中；

Rectangle {
	id:rootRect;
	width:600;
	height:200;
	color:"grey";

	ListView {
		id:listView;
		width:parent.width;
		height:parent.height;
		clip:true; //对超出划定边界的数据进行裁剪
		delegate：modelItem; //自定义列表内容的组件，属性是Component
		//构建一个Model，也可以直接引入c++中的创建的model 运行程序可已看到生成了一个包含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;
               }
           }
       }
   }
}

以上的内容在qt运行显示的是一个基础的列表，但是一眼望去并不明确每一项的具体含义, 这样在一些使用过程中很不方便：具体的显示效果如下：
在这里插入图片描述
可以通过鼠标移动或者滚轮滑动查看列表的显示，但是对每一项的含义不是那么的直观，也有一种方法就是直接在model也就是列表的index为1的时候添加每一列的名称进去，显示的时候可以看到每一列的名称，具体代码如下，只需在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"
    }
}

效果展示：
在这里插入图片描述
可以看到第一行有显示每一列数据的名字了，但是因为设置的字体显示与后面一致（可以单独对某一个index的item设置不同的参数来突出显示，这里不做过多说明），而且会随着滑动，而且数据多了会滑动消失，所以不推荐使用；
在qml中，可以ListView的特性创建一个列表头，显示每一项的具体含义；表头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列表,并创建一个Model填入数据，运行程序可已看到生成了一个包含name,age,Heigth但是一眼望去并不明确每一项的具体含义；
      利用ListView的特性创建一个列表头，显示每一项的具体含义；表头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; //超出边界的数据进行裁剪
            delegate:modelItem;
            header:headerView;//只构建表头上滑动时表头也会跟随上滑动消失
            headerPositioning: ListView.OverlayHeader;//枚举类型
            /*
                ListView.OverlayHeader: 向上滑动直接覆盖表头
                ListView.InlineHeader:表头和内容是放置在一起的，移动也是一起移动，默认设置此属性；
                ListView.PullBackHeader:表头和内容是可以分开，向上滑动会顶上去看不见
            */

            //构建一个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坐标设置在上层，表头在设置属性为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;
                    }
                }
            }
        }
    }
}

如果表头还是会随着滑动消失，可以设置组件的z轴，让该组件显示在最上层，达到表头一直显示的效果；特别要注意的是需要设置ListView的headerPositioning的属性为ListView.OverlayHeader这个类型（三个类型的描述在代码里有注释），这个是向上滑动覆盖表头，但是因为表头的z轴设置的是最上层，所以并不会被覆盖，以此达到表头显示的效果。
以上的header添加后就可以在显示一个带表头的列表，并且列表滑动表头不会随着列表滑动，始终显示在最上方。实现效果显示如下：
在这里插入图片描述

可以看到表头一直显示到最上方，且不会随滑动消失。
还有一个问题就是一个点击穿透的问题，上滑后点击表头会触发列表内容的点击，如果有监控对列表的点击操作时点击表头就会造成误操作，这里就需要做一个放穿透效果，即在表头的组件中加上以下代码：

MouseArea {
    anchors.fill: parent;
    onPressed: {
        mouse.accepted = true;
    }
}

如上所述。

南方有大雪
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QT表头支持多列显示，功能强大
04-02
QT表头支持多列显示，功能强大，代码有点难度，下载的同学好好研究一下，并且字体显示有乱码，自行解决，不影响功能
ListView简单实用－表头表尾分割线的设置
GL_X85的博客
09-12 1379
listview作为一个列表控件，他和普通的列表一样，可以自己设置表头与表尾：以及分割线，可供我们设置的属性如下： footerDividersEnabled：是否在footerView(表尾)前绘制一个分隔条,默认为trueheaderDividersEnabled:是否在headerView(表头)前绘制一个分隔条,默认为truedivider:设置分隔条,可以用颜色分割,也可以用dra
QML学习十五：ListView的简单使用（内建Model）
最新发布
qq_35662333的博客
06-12 510
转载。
QML ListView几个常用且非常重要的属性
hw5230的博客
03-27 640
用 QML 开发界面的好处想必就不用多说了吧，可以总结为一个字：爽。的确如此，用 QML 可以快速的开发出一些非常酷炫和复杂的界面，并且代码还非常简洁，可读性很强，容易理解。今天要总结的是关于 ListView 中的一些常用的属性，非常实用，不过如果是刚接触 ListView 的话，可能会有些陌生（本人刚开始用的时候也是，然后翻遍了 Qt 帮助文档），所以这里汇总一些最常用的属性并介绍其用法。
【QML Model-View】ListView-简单使用（一）
m0_60259116的博客
03-04 918
【QML Model-View】ListView-简单使用（一）
Qt QTableWidget 表格设置表头列标题
ken2232的博客
03-23 2833
Qt QTableWidget 表格设置表头列标题
ListView怎么添加表头
lumennaturale的博客
03-07 9151
1）在窗体上布置一个ListView 2）在listView1的“属性”中 将 GridLines设置为True 将 View设置为 Details 3）在listView1的“属性”中，找到 “Columns"属性，点右侧 ...按钮。在编辑器中，点 “添加”按钮，然后修改ColumnHeader的Text属性 4）效果
Qt qml中listview 列表视图控件（下拉刷新、上拉分页、滚动轴）
09-02
在Qt QML中，ListView是用于显示和管理一系列项的常用控件，它支持动态加载数据，这在处理大量数据时特别有用。本教程重点介绍了ListView的三个关键特性：下拉刷新、上拉分页以及滚动轴的使用。 **下拉刷新**： ...
qt qml 中 listview, scrollbar的使用例子
08-14
qml 中的listview添加滚动条，按住滚动条可以使list滚动。 随着list条数增多，滚动条的长度就会减小。但是list条数过多，滚动条变得已经特别小了，这样不利于操作；因此滚动条长度需要设置一个最小值，本例中最小值...
SelectListView.qml (QML ListView 多选)
10-16
Qml 中的listview 默认不提供多选 Ctrl + A 全选， Shift +点击 范围选择， Ctrl+ 点击 多选 ，这个资源中实现了这几种选择，除了框选。
如何使QtQML中ListView从底往上排列.docx
03-22
。
[QT_011]Qt学习之QTableWidget的 表头 和 选中区域
kongcheng253的博客
01-09 1万+
Qt学习之QTableWidget的 表头 和 选中区域
QListWidget与QTableWidget的使用以及样式设置
热门推荐
Code搬运工
06-24 6万+
//一、QListWidgetlist_widget = new QListWidget();//list_widget->resize(200,300); list_widget->setFixedWidth(300); //设置item图标大小 list_widget->setIconSize(QSize(50,30));QListWidgetItem *add_item = new QList
QML类型：ListView
友善啊，朋友的博客
10-14 1万+
一、描述 ListView 继承自 Flickable，用作显示来自内置 QML 类型（如 ListModel 和 XmlListModel）或从 QAbstractItemModel 或 QAbstractListModel 继承的 C++ 中定义的自定义模型类创建的模型中的数据。 二、使用示例 import QtQuick 2.12 import QtQuick.Window 2.0 Window { id:root; visible: true; width: 20.
Qt QTableWidget
光顶术士的博客
08-11 1万+
下图lineEdit中的数值是好用ms值,我累加的方式是(row+1)*2,就是在原有的行数上+1再翻倍,可以看到在三千万/2的时候,耗时是153毫秒,还算可以,然后是提示错误.不能翻倍为六千万了,如果在ui界面创建的表，没有给单元格赋值，然后直接获取，或报错，这个错我使用try catch() 都没有搞定，所以就是给它初始化。当使用以上方法后，会出现高亮的bug，点击后会高亮遮盖值，这里虽然已经不允许编辑，但是视觉效果还是不好，所以需要再添加。在使用item.text之前，一定是初始化过的。
Qtablewidget使用QHeaderView设置表头
qq_47500842的博客
12-20 5869
Qtablewidget使用QHeaderView设置表头
Qt | QListView、QListWidget、QTableView、QTableWidget的使用示例及区别
^_^
11-25 5656
QListView、QListWidget是列表形式展示的控件。QTableView、QTableWidget是表格形式展示控件。继承关系：带Widget的继承自View，即：QListWidget是继承QListView，QTableWidget继承自QTableView。区别：QListView是基于Model，而QListWidget基于Item。这是它们的本质区别。QTableView、QTableWidget同理。
Flutter | 给 ListView 添加表头表尾最简单的方式
无夜之星辰的博客
07-21 1630
好好看代码，一个小小的Column就能解决问题。
qlistwidget设置选中行_从“头”开始，让你玩转Excel表头设置
weixin_39963440的博客
12-05 1341
从“头”开始，让你玩转Excel表头设置大家好，很高兴又见面了。在前面每天的分享中，我们逐步对excel表格的常用方法、技巧进行了交流，很多小伙伴的战斗能力是否有所提高呢？呵呵呵……今天，我们将继续围绕Excel表格的相关操作进行学习，希望可以对办公人的你有所帮助。相信，很多办公人对表格的表头设置都不陌生，虽然表头比较简单，但因为有时工作需要不同样式、不同的打印方式，不同的显示方式等也会使很多人在...
qtqml cmake 添加C++类
05-28
如果你想在 Qt QML 中使用 C++ 类，可以通过 CMake 添加一个 C++ 类，并将其与 QML 集成。 以下是添加 C++ 类的步骤： 1. 在项目中创建一个新的 C++ 类，例如 `MyClass`，并将其添加到 `src` 目录下。 2. 在 CMakeLists.txt 文件中添加以下代码： ``` # 添加 C++ 类 add_library(MyClass SHARED src/myclass.cpp src/myclass.h ) # 链接 Qt 模块 target_link_libraries(MyClass PRIVATE Qt6::Core Qt6::Qml) # 安装库文件 install(TARGETS MyClass LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR} ) # 安装头文件 install(FILES src/myclass.h DESTINATION ${CMAKE_INSTALL_INCLUDEDIR}/myproject ) ``` 这个命令会将 `MyClass` 添加到项目中，并将其链接到 Qt6 的核心库和 QML 库中。 3. 在 `main.qml` 文件中添加以下代码： ``` import myproject 1.0 // 创建 C++ 类实例 MyClass { id: myclass } // 使用 C++ 类的属性和方法 Text { text: myclass.text } ``` 这个命令会将 `MyClass` 导入到 QML 中，并创建一个 C++ 类实例。你可以像使用其他 QML 类一样使用这个实例的属性和方法。 注意，为了使 C++ 类能够在 QML 中使用，你需要在类的头文件中使用 `Q_OBJECT` 宏，并在 C++ 类中添加 QML 属性和方法。例如： ``` #ifndef MYCLASS_H #define MYCLASS_H #include <QObject> class MyClass : public QObject { Q_OBJECT Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged) public: explicit MyClass(QObject *parent = nullptr); QString text() const; void setText(const QString &text); signals: void textChanged(); private: QString m_text; }; #endif // MYCLASS_H ``` 这个类中添加了一个 `text` 属性和相应的读写方法，并使用 `Q_PROPERTY` 宏将其导出到 QML 中。在实现文件中，需要为这个类的方法添加相应的实现代码。 以上就是在 Qt QML 中添加 C++ 类的步骤，希望对你有帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值