qml tableview

已于 2022-08-05 17:10:21 修改
阅读量761 收藏 6
点赞数 1
文章标签： qt 开发语言 qml tableview
于 2022-08-03 19:30:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wite_chen/article/details/126147331
版权

一、C++ model

CustomTableModel.h

#pragma once
#include <QAbstractTableModel>
#include <set>


class CustomTableModel : public QAbstractTableModel
{
    Q_OBJECT
    const static int kColumnCnt = 5;
    const static int kInvalidRow = -1;
    enum {
        NodeSelectStateRole = Qt::UserRole + 1,
        NodeFileName,
        NodeSize,
        NodeTime
    };

    enum TableColumn {
        TableColumnCheckbox,
        TableColumnFilefilename,
        TableColumnSize,
        TableColumnTime
    };

    struct FileInfo
    {
        QString qstrFilename;
        QString qstrSize;
        QString qstrTime;
    };

public:
    CustomTableModel(QObject* pParent = nullptr);
    int rowCount(const QModelIndex & = QModelIndex()) const override;
    int columnCount(const QModelIndex & = QModelIndex()) const override;
    QVariant data(const QModelIndex &index, int role) const override;
    QHash<int, QByteArray> roleNames() const override;
    Q_INVOKABLE QVariant headerData(int section, Qt::Orientation orientation, int role = Qt::DisplayRole) const override;
    Q_INVOKABLE void initModel();
    Q_INVOKABLE bool isItemSelected(int nRow) const;
    Q_INVOKABLE QVariant getData(int nRow, int nCol);

private slots:

private:
    QVariant get_data(int row, int role) const;

private:
    std::vector<FileInfo> m_listFile;
    std::set<int> m_setSelect;
    std::vector<QString> vecHeader;

};

CustomTableModel.cpp

#include "CustomTableModel.h"
#include <QDebug>
#include <sstream>




CustomTableModel::CustomTableModel(QObject* pParent/* = nullptr*/)
    : QAbstractTableModel(pParent)
{
    vecHeader.emplace_back(QString(""));
    vecHeader.emplace_back(QString("filenmae"));
    vecHeader.emplace_back(QString("size"));
    vecHeader.emplace_back(QString("time"));
}

int CustomTableModel::rowCount(const QModelIndex &/* = QModelIndex()*/) const
{
    return m_listFile.size();
}

int CustomTableModel::columnCount(const QModelIndex &/* = QModelIndex()*/) const
{
    return kColumnCnt;
}

QVariant CustomTableModel::data(const QModelIndex &index, int role) const
{ 
    return get_data(index.row(), role);
}

QHash<int, QByteArray> CustomTableModel::roleNames() const
{
    return {
        {NodeFileName, "fileName"},
        {NodeSize, "size"},
        {NodeTime,"time"}
    };
}

QVariant CustomTableModel::headerData(int section, Qt::Orientation orientation, int role/* = Qt::DisplayRole*/) const
{
    if(role == Qt::DisplayRole) {
        // horizontal header
        if(orientation == Qt::Horizontal) {
            if(section >= vecHeader.size()) return QVariant();
            return vecHeader[section];
        }
    }
    return QVariant();
}

bool CustomTableModel::isItemSelected(int nRow) const
{
    return m_setSelect.find(nRow) != m_setSelect.end();
}

void CustomTableModel::initModel()
{
    beginResetModel();
    m_listFile.clear();
    m_setSelect.clear();
    for(int i = 0; i < 15; ++i) {
        FileInfo infoFile;
        infoFile.qstrFilename = QString("file") + QString::number(i);
        infoFile.qstrSize = "66 Mb";
        infoFile.qstrTime = "2022-08-02 21:00:00";
        if(i % 2)
            m_setSelect.insert(i);
        m_listFile.emplace_back(infoFile);
    }

    endResetModel();
}

QVariant CustomTableModel::getData(int nRow, int nCol)
{
    return get_data(nRow, nCol + NodeSelectStateRole);
}


QVariant CustomTableModel::get_data(int row, int role) const
{
    switch (role) {
        case NodeSelectStateRole:
            return isItemSelected(row);
        case NodeFileName:
            return m_listFile[row].qstrFilename;
        case NodeSize: {
            return m_listFile[row].qstrSize;
        }
        case NodeTime:
            return m_listFile[row].qstrTime;
        default:
            return QVariant();
        }
    return QString("hello");
}

qml文件

CustomTableview.qml

import QtQuick 2.15
import QtQuick.Controls 2.15



TableView
{
    id: root


    /************************************************************************************************
    *                                       properties                                              *
    *************************************************************************************************/
    // state for load more
    property bool bContentYChanged: false
    // flick stop at bounds
    boundsBehavior: Flickable.StopAtBounds
    clip: true


    // scroll bar for vertical
    ScrollBar.vertical: ScrollBar {
         parent: flickable.parent
         anchors.top: flickable.top
         anchors.left: flickable.right
         anchors.bottom: flickable.bottom
     }


    /************************************************************************************************
    *                                       signals                                                 *
    *************************************************************************************************/
    // triggered on load more
    signal signalLoadMore();




    // width for cell
    //columnWidthProvider: function (column) { return 40; }
    // height for each row
    //rowHeightProvider: function (column) { return 40; }



    /************************************************************************************************
    *                                       connection                                               *
    *************************************************************************************************/
    Connections {
        target: root
        // suitable for width
        function onWidthChanged() {
            // force strench width for tableview
            viewContent.forceLayout();
            //console.log("width changed")
        }

        // check load more(down)
        function onAtYEndChanged() {
            if(bContentYChanged) {
                bContentYChanged = false;
                // load more with last record
                //console.log("need load more triggered, state: " + root.atYEnd)
                if(root.atYEnd)
                    signalLoadMore();
            }
        }

        // triggered on content Y changed
        function onContentYChanged() {
            bContentYChanged = true;
            //console.log("Content Y changed: " + root.contentY)
        }
    }
}

CustomCheckbox.qml

import QtQuick 2.0
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15


Rectangle {
    // border color
    //border.color: "#222222"
    // border width
    //border.width: 0
    color:"#00000000"
    property string imgSource
    property bool clickable:true
    // custom signal
    signal mouseClicked
    signal mouseClickpos(int x, int y)
    signal hovered
    property int radiusBtn : 2
    property bool checked: false
    property string imgChecked;
    property string imgUnchecked;
    // image for button

    Image {
        id: imgButton
        anchors.fill: parent
        anchors.centerIn: parent
        source: parent.checked ? parent.imgChecked: parent.imgUnchecked
        fillMode: Image.PreserveAspectFit
        visible: false
    }

    Rectangle{
        id: mask
        anchors.fill: parent
        radius: radiusBtn
        visible: false
    }
    OpacityMask {
        anchors.fill: parent
        source: imgButton
        maskSource: mask
    }



    // mouse area
    MouseArea
    {
        id: btnMouse
        hoverEnabled: true
        anchors.fill: parent
        // handle style on image button
        //cursorShape: clickable ? Qt.PointingHandCursor : Qt.ArrowCursor
        onClicked: {
            if(!clickable)return
            checked = !checked;
            mouseClicked()
            mouseClickpos(mouse.x,mouse.y)
            updateCheckState(checked);
        }
        onEntered: hovered()
    }
    // set button type
    function setButtonType(bCycle) {
        if(bCycle)
            radius = width /2
    }

    function setMouseShape(bEnable) {
        if(bEnable)
            btnMouse.cursorShape = Qt.PointingHandCursor
        else
            btnMouse.cursorShape = Qt.ArrowCursor
    }

    function setButtonIcon(qstrIcon) {
        imgButton.source = qstrIcon
    }

    function setClickable(enable) {
        clickable = enable;
    }

    function updateCheckState(checked) {
        imgButton.source = checked ? imgChecked: imgUnchecked
        checked = bchecked
        //console.log("update checkbox img: " + checked)
    }
}

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15


Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    FileView {
        anchors.fill: parent
    }


}

FileView.qml

import QtQuick.Controls 2.15
import QtQuick 2.15
import Qt.labs.qmlmodels 1.0
import CustomTableModel 1.0


Rectangle {
    id: root
    enum TableColumn {
        TableColumnCheckbox,
        TableColumnFilefilename,
        TableColumnSize,
        TableColumnTime
    }
    property int widthCheckbox : 40
    property int widthFilename : 180
    property int widthTime : 180
    property int widthSize : 150
    property bool checkedAll: false

    signal selectAll(bool bSelectAll);
    // tableview
    CustomTableview {
        id:viewContent
        anchors.fill: parent
        columnWidthProvider: function (column) {
            var nWidth = widthCheckbox;
            switch(column){
                case FileView.TableColumnCheckbox: {
                    nWidth = widthCheckbox;
                    break;
                }
                case FileView.TableColumnFilefilename:{
                    nWidth = viewContent.width - widthTime - widthCheckbox - widthSize - 150;
                    if(nWidth < 0)
                        nWidth = widthFilename
                    break;
                }
                case FileView.TableColumnSize:{
                    nWidth = widthSize;
                    break;
                }
                case FileView.TableColumnTime:{
                    nWidth = widthTime;
                    break;
                }
                case 4:{
                    nWidth = 150;
                    break;
                }
            }
            //console.log("get column width, col: " + column+ ", width: " + nWidth)
            return nWidth;
        }
        rowHeightProvider: function (column) { return 40; }

        model:modelContent
        // item deletegate
        delegate:DelegateChooser{
            DelegateChoice{
                column: FileView.TableColumnCheckbox
                delegate: Rectangle{
                    width: widthCheckbox //viewContent.columnWidthProvider(FileView.TableColumnCheckbox);
                    //implicitHeight: 32
                    CustomCheckbox {
                        id: checkboxItem
                        width: 20
                        height: 20
                        imgChecked: "qrc:/box_checked@2x.png"
                        imgUnchecked: "qrc:/box_uncheck@2x.png"
                        anchors{
                            centerIn: parent
                            verticalCenter: parent.verticalCenter
                        }
                        checked: modelContent.getData(row, FileView.TableColumnCheckbox)
                        onMouseClicked: {
                            console.log("clicked at index:" + index)
                        }
                        // select all/none
                        Connections {
                            target: root
                            function onSelectAll(bSelectAll) {
                                checkboxItem.updateCheckState(bSelectAll);
                            }
                        }
                    }
                }
            }
            DelegateChoice{
                column: FileView.TableColumnFilefilename
                delegate: Rectangle{
                    id: rectFilename
                    //color: "#666666"
                    width: viewContent.columnWidthProvider(FileView.TableColumnFilefilename);
                    //implicitHeight: 32
                    //border.width: 1
                    //border.color: "#848484"
                    TextMetrics {
                          id: textMetrics
                          text: modelContent.getData(row, FileView.TableColumnFilefilename)
                    }
                    Text {
                        id: textFilename
                        text: modelContent.getData(row, FileView.TableColumnFilefilename)
                        width: viewContent.columnWidthProvider(FileView.TableColumnFilefilename)
                        anchors {
                            left: parent.left
                            right: parent.right
                            top: parent.top
                            bottom: parent.bottom
                        }
                        font.pointSize: 12
                        horizontalAlignment: Text.AlignLeft
                        verticalAlignment: Text.AlignVCenter
                    }
                    MouseArea{
                        id:areaMouse
                        hoverEnabled: true
                        anchors.fill: parent
                    }
                    ToolTip
                    {
                        height: 26
                        visible: areaMouse.containsMouse && textFilename.text !== "" && textMetrics.width > (rectFilename.width-6)
                        contentItem: Text {
                            text: textFilename.text
                            color: "#D6D6D6"
                        }
                        background: Rectangle {
                            color: "#222222"
                        }
                    }
                }
            }
            DelegateChoice{
                column: FileView.TableColumnSize
                delegate: Rectangle{
                    width: viewContent.columnWidthProvider(FileView.TableColumnSize);
                    //implicitHeight: 32

                    Text {
                        text: modelContent.getData(row, FileView.TableColumnSize)
                        anchors.fill: parent
                        font.pointSize: 12
                        //color: "white"
                        horizontalAlignment: Text.AlignLeft
                        verticalAlignment: Text.AlignVCenter
                    }
                }
            }
            DelegateChoice{
                 column: FileView.TableColumnTime
                 delegate: Rectangle{
                     id:rect
                     width: viewContent.columnWidthProvider(FileView.TableColumnTime);
                     //implicitHeight: 32
                     clip: true
                     Text {
                         id: textTime
                         text: modelContent.getData(row, FileView.TableColumnTime)
                         anchors.centerIn: parent
                         font.pointSize: 12
                         width: parent.width
                         elide: Text.ElideRight
                         leftPadding: 3
                         rightPadding: 3
                     }
                 }
             }
        }
    }

    CustomTableModel {
        id: modelContent
    }
    // header view
    HorizontalHeaderView {
        id: headerContent
        visible: true
        // disbale drag on table
        interactive: false
        // sync with tableview
        syncView: viewContent
        //model: ["123", "filename", "size", "time"]
        model:modelContent
        delegate:Rectangle{
            CustomCheckbox {
                id: checkboxHeader
                width: 20
                height: 20
                imgChecked: "qrc:/box_checked@2x.png"
                imgUnchecked: "qrc:/box_uncheck@2x.png"
                anchors{
                    centerIn: parent
                    verticalCenter: parent.verticalCenter
                }
                visible: (0 == index) ? true: false;
                checked: checkedAll
                onMouseClicked: {
                    console.log("clicked at index:" + index + ", check state: " + checkboxHeader.checked)
                    headerSelectAll(checkboxHeader.checked);
                }
            }
            Text {
                // model declared in qml, modelData = header-data
                text: modelContent.headerData(column, Qt.Horizontal)
                //text: modelData
                font.pointSize: 12
                verticalAlignment: Text.AlignVCenter
                anchors {
                    left: parent.left;
                    verticalCenter: parent.verticalCenter
                }
                visible: !checkboxHeader.visible
            }
        }
    }

    Component.onCompleted: {
        modelContent.initModel();
    }

    function headerSelectAll(bSelectAll) {
        checkedAll = bSelectAll;
        selectAll(checkedAll);
    }
}
Wite_Chen
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
qml tableview 显示滚动条
lazydz的专栏
12-21 382
如果你使用QtQuick.Controls 2.15，tableview 是没有滚动条的，如果要显示滚动条需要外面包一层ScrollView。
QML自定义TableView数据的表现样式：列的委托
06-09
自定义QML中的TableView的数据表现样式，主要是对表格中每列的数据定义不同的表现形式，例如用单选框、ComBobox、进度条等形式对数据进行形象化的显示，对于熟悉TableView的使用有较大的帮助 ,本代码可以直接通过qmlscene运行，支持QT5.5及其以上版本
QML学习十八：TableView的简单使用（使用C++Model)
qq_35662333的博客
06-12 518
在QT下使用表格是想当的多，使用C++自定义Mode在TableView中显示方法和ListView操作方式类似，TableView下增加了很多表头等操作方便自定义表格。在此不涉及。本篇记录TableView显示C++的Model。
QML TableView 表格总结
一个老菜鸟的学习分享
06-30 434
qml 的资料相对qt widget来说，还是偏少啊，无论从帮助文档还是从网上搜索。笔者项目中遇到的一些展示控件，需要用tableview来展示，总结了一下两种方式，都是基于Tableview来实现的，一种是基于 QtQuick.Controls 1.4 版本，一种是高版本 QtQuick 2.14。对业务代码进行了删除，只保留了跟表格有关的代码。几种最重要的几个属性就是。主要关注一下属性设置。
QML TableView表格使用示例
热门推荐
luoyayun361的专栏
01-07 1万+
前言 QML中实现表格可以使用多种方式，比如直接使用ListView，定义每一行delegate，或者自定义Rectangle，放到Flipable中组合使用。Qt Quick Control1中 从5.1版本开始就提供了表格控件，但是感觉不怎么好用，在Qt Quick Control2中 5.12版本开始又提供了一个专门用于做表格的控件TableView，相比于前面的方案，使用Tableview更加简单和直接。那么，接下来就看看Quick Control2 的TableView使用方法。 正文 我们直接针
QML TableView类
weixin_42948436的博客
05-29 755
导入 import QtQuick 2.1 Qt版本 Qt 5.14 继承 Flickable Properties bottomRow : int columnSpacing : real columnWidthProvider : var columns : int contentHeight : real contentWidth : real delegate : Component leftColumn : int model : model reu...
QmlTableView
zhengtianzuo的博客
10-19 4803
使用QtQuick的MVC模式 新建c++类继承于QAbstractTableModel, 并实现几个重要方法:CPP中:class QmlTableViewModel : public QAbstractTableModel { Q_OBJECT public: explicit QmlTableViewModel(); int rowCount(const QModel
QML TableView 使用详解
u013873761的博客
05-31 1万+
目录 一、—个简单的TableView实例 二、TableViewColumn 属性讲解 三、定制表格外观 3.1 itemDelegate 3.2 rowDelegate 3.3 headerDelegate 3.4 定制表格外观后的示例 四、动态增删改查 TabelView TableView 就是 Qt Quick 为表格式呈现数据提供的组件。想必兄台用过 Excel，可以藉此想象下 TableView 的效果。 TableView 与 ListView 类似，相比之下多了滚动条、挑选、可调整尺寸
QML TableView选中单行
adddais的博客
01-30 1391
tableView学习日常之模拟选中
qml tableview 滚动条加宽_如何使qml tableview行高动态适应内容
weixin_29227585的博客
02-11 559
问题如下:如果文本的长度大于单元格的宽度,则文本将被换行,但行的高度不会增加。显示截取的其余文本。我的另一个问题是,如何调整每个单元格的高度以适应其中包含的文本?以下是qml部分:Window {id: windowvisible: truewidth: 440height: 400title: qsTr("Table test")ListModel {id: stringsModelListEl...
QML TableView Demo演示示例
06-09
QML中实现表格可以使用多种方式，比如直接使用ListView，定义每一行delegate，或者自定义Rectangle，放到Flipable中组合使用。Qt Quick Control1中 从5.1版本开始就提供了表格控件，但是感觉不怎么好用，在Qt Quick ...
qml tableview 全选，单选
12-04
在Qt Quick（QML）开发中，`TableView`是一个用于展示数据的组件，它支持多种视图模式，如列表、网格等。`TableView`通常与Model/View/Controller（MVC）架构一起使用，以便更好地管理和操作数据。在这个场景中，...
TableEdit:qml TableView 表格编辑器
05-07
TableView对应的数据model，使用Qml/ListModel，数据的创建、导入等操作，全部使用qml/js实现。 引入了JSONPath，快速访问JSON并转化到ListModel。 内容上有些汽车行业相关的文字，请忽略。 工程里面也有一些常用...
qml tableview 表格
01-06
作者，QQ1284524409。 预览， deploy.pri HEADERS += \ $$PWD/deploy.h SOURCES += \ $$PWD/deploy.cpp  deploy.h #ifndef DEPLOY_H #define DEPLOY_H #include #include class Deploy : public ... void
QML tableView表格自定义
qq_43627981的博客
05-29 5229
import QtQuick 2.12 import QtQuick.Controls 2.12 import Qt.labs.qmlmodels 1.0 Rectangle { z: 10 id: tableView width: dpH(919) height: dpH(475) anchors { top: parent.top .
【VS2019安装+QT配置】
vor234的博客
07-24 565
前期安装了qt，发现creator编辑器并不好用，一点都不时髦。在李大师的指导下，听说visual studio2019超级好用。对此开始采用visual studio2019进行编写程序。断点调试，函数调用功能对于开发者来说超级棒！下面来实操vs2019安装+QT配置过程，QT安装参考【Qt安装与简易串口控制Arduino开发板小灯教程】🥳🥳🥳现在，我们在本教程中，您学习了vs2019安装+QT配置教程。
QT自定义无边框窗口（可移动控制和窗口大小调整）
最新发布
u012959478的博客
07-25 939
QT是一个功能强大的跨平台开发框架，它提供了丰富的界面设计工具和组件。在界面开发中，QT窗口自带的标题栏无法满足我们的需求。我们就需要自定义无边框窗口，包括自定义标题栏和窗口大小调整功能。本文将介绍如何在QT中实现这些功能。
根据鼠标所在位置获取组件拿到 “qt_scrollarea_viewport” 组件的问题
cwxBlogs
07-23 358
通过坐标获取组件，拿到 object_name = “qt_scrollarea_viewport” 的组件的问题，如果要拿到真实的坐标所在位置的组件，直接取当前组件的parentWidget即可。
QML TableView
11-14
QML TableView是一种用于显示表格数据的QML组件。以下是一个简单的QML TableView的例子： ```qml import QtQuick 2.0 import QtQuick.Controls 2.0 TableView { TableViewColumn { role: "name" title: "Name" width: 100 } TableViewColumn { role: "age" title: "Age" width: 50 } model: ListModel { ListElement { name: "John" age: 30 } ListElement { name: "Jane" age: 25 } } } ``` 在这个例子中，我们定义了一个包含两列的TableView，第一列显示名字，第二列显示年龄。我们使用ListModel作为数据模型，其中包含两个ListElement，每个元素都有一个名字和一个年龄。当我们运行这个例子时，我们将看到一个包含两列和两行的表格，其中第一列显示名字，第二列显示年龄。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值