Qt Quick之TableView的使用

本博只是简单的展示TableView的基本使用(TableView、style:TableViewStyle、headerDelegate、rowDelegate、itemDelegate、Table

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

 本博只是简单的展示TableView的基本使用(TableView、style:TableViewStyle、headerDelegate、rowDelegate、itemDelegate、TableViewColumn、ListModel及访问和修改Model),关于更多属性和方法的使用可以参考TableView QML Type

1. 效果图

  Qt Quick之TableView的使用

2. 代码实现

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

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

    TableView
    {
        id:stockTable;

        anchors.left: parent.left;
        anchors.top:parent.top;
        anchors.topMargin: 10;
        anchors.right: parent.right;
        anchors.bottom: parent.bottom;
        //alternatingRowColors : true;
        style:TableViewStyle
        {
            id:tstyle;
            backgroundColor:"white";
            alternateBackgroundColor:"#f6F6F6";
            textColor:"black";

            // 设置TableView的头部
            headerDelegate: Canvas
            {
                implicitWidth:100;
                implicitHeight:32;

                onPaint:
                {
                    var ctx = getContext("2d");
                    ctx.lineWidth = 2;
                    ctx.strokeStyle="red";
                    ctx.fillStyle="blue";

                    ctx.beginPath();
                    console.log("width:",width,"--","height:",height);
                    ctx.rect(0,0,width,height);
                    ctx.stroke();
                    ctx.font="14pt sans-serif";
                    ctx.textAlign="right"
                    ctx.textBaseLine="middle";
                    ctx.fillText(styleData.value,width-2,height/2+10);
                }
            }

            // 设置行
            rowDelegate:Rectangle
            {
                height:30;
                color: styleData.selected? "red":
                    (styleData.alternate ? tstyle.backgroundColor :
                                           tstyle.alternateBackgroundColor);
            }

            // 设置单元格
            itemDelegate: Text
            {
                text:styleData.value;
                font.pointSize:13;
                verticalAlignment:Text.AlignVCenter;
                horizontalAlignment:Text.AlignRight;
            }
        }

        TableViewColumn
        {
            role:"code";
            title:qsTr("Code");
            width:120;
            movable: false;
        }

        TableViewColumn
        {
            role:"name";
            title:qsTr("Name");
            width:120;
            movable: false;
        }

        ListModel {
              id: libraryModel
              ListElement {
                  code: "159922"
                  name: "500ETF"
              }
              ListElement {
                  code: "600030"
                  name: "中信证券"
              }
              ListElement {
                  code: "300244"
                  name: "迪安诊断"
              }
          }

        model: libraryModel;
    }
}

3. 访问和修改Model

(1) 访问数据

    itemDelegate: Text
            {
                text:styleData.value;
                font.pointSize:13;
                verticalAlignment:Text.AlignVCenter;
                horizontalAlignment:Text.AlignRight;

                MouseArea
                {
                    anchors.fill:parent;
                    onClicked:
                    {
                        console.log("currentRow:",styleData.row, "-", styleData.column);
                        console.log(libraryModel.get(styleData.row).code, "-",
                                    libraryModel.get(styleData.row).name);
                    }
                }
            }

(2)删除数据

    rowDelegate:Rectangle
            {
                height:30;
                color: styleData.selected? "red":
                    (styleData.alternate ? tstyle.backgroundColor :
                                           tstyle.alternateBackgroundColor);

                MouseArea
                {
                    anchors.fill:parent;
                    onClicked:
                    {
                        libraryModel.remove(styleData.row);                     }
                }
            }

(3)修改数据

    itemDelegate: Text
            {
                text:styleData.value;
                font.pointSize:13;
                verticalAlignment:Text.AlignVCenter;
                horizontalAlignment:Text.AlignRight;

                MouseArea
                {
                    anchors.fill:parent;
                    onClicked:
                    {
                        console.log("currentRow:",styleData.row, "-", styleData.column);
                        console.log(libraryModel.get(styleData.row).code, "-",
                                    libraryModel.get(styleData.row).name);
                        libraryModel.set(styleData.row, {"code":"888888", "name":"modify"});                     }
                }
            }

(4)添加数据

    rowDelegate:Rectangle
            {
                height:30;
                color: styleData.selected? "red":
                    (styleData.alternate ? tstyle.backgroundColor :
                                           tstyle.alternateBackgroundColor);

                MouseArea
                {
                    anchors.fill:parent;
                    onClicked:
                    {
                        //libraryModel.remove(styleData.row);
                        libraryModel.append({"code":"666666", "name":"add"});
                    }
                }
            }

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120075.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 面试必备之乐观锁与悲观锁

    面试必备之乐观锁与悲观锁推荐阅读:如何在技术领域持续成长后端程序员必备的Linux基础知识后端必备——数据通信知识(RPC、消息队列)一站式总结何谓悲观锁与乐观锁乐观锁对应于生活中乐观的人总是想着事情往好的方向发展,悲观锁对应于生活中悲观的人总是想着事情往坏的方向发展。这两种人各有优缺点,不能不以场景而定说一种人好于另外一种人。悲观锁总是假设最坏的情况,每次去拿数据的时候都认为…

    2022年6月24日
    24
  • 记录搭建Hexo博客系统

    记录搭建Hexo博客系统

    2022年3月12日
    54
  • spring事务的传播行为和隔离级别_spring常用的事务传播行为

    spring事务的传播行为和隔离级别_spring常用的事务传播行为  本文主要介绍下Spring事务中的传播行为。事务传播行为介绍Spring中的7个事务传播行为:事务行为说明PROPAGATION_REQUIRED支持当前事务,假设当前没有事务。就新建一个事务PROPAGATION_SUPPORTS支持当前事务,假设当前没有事务,就以非事务方式运行PROPAGATION_MANDATORY支持当前事务,假设当前没有事…

    2025年7月1日
    2
  • manifest 文件作用「建议收藏」

    信息:未找到WinSxS中的程序集。信息:尝试在C:\Windows\assembly\GAC_32\Microsoft.VC80.CRT\8.0.50727.6195__1fc8b3b9a1e18e3b\Microsoft.VC80.CRT.DLL上探测指令清单。信息…

    2022年4月11日
    59
  • Docker(三)- 从镜像运行启动容器「建议收藏」

    Docker(三)- 从镜像运行启动容器「建议收藏」文章目录从镜像运行启动容器容器启动后运行的命令`ENTRYPOINT`和`CMD`启动容器时覆盖`ENTRYPOINT`和`CMD“-d`后台运行`dockerexec`进入容器,运行指定命令`–name`和`–restart=always“–rm`和`dockercp`从镜像运行启动容器从一个镜像可以运行启动一个或多个容器。所谓容器,我们可以理解为是一个虚拟的计算机,其中运行着操作系统,操作系统中运行着我们部署的应用。从tomcat镜像启动容器:do

    2025年12月1日
    5
  • 面试官:MySQL索引底层数据结构原理与性能调优,你能回答多少?「建议收藏」

    面试官:MySQL索引底层数据结构原理与性能调优,你能回答多少?「建议收藏」面试官:听说你精通MySQL,那来和我大战三百个回合吧!

    2022年6月24日
    23

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号