1. 全栈程序员必看首页

Qt Quick之TableView的使用

全栈程序员-站长 • • 未分类 • 阅读 69

本博只是简单的展示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)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • linux发邮件2种常见客户端命令[通俗易懂]

    linux发邮件2种常见客户端命令[通俗易懂]

    linux发邮件2种常见客户端命令[通俗易懂]mail命令格式:mail-s”标题”邮件地址<文件echo”正文”|mail-s”标题”邮件地址例如:mail-s”liwen”1935845114@qq.com<hostsmutt命令mutt-s”标题”邮件地址<文件命令发邮件需要邮件服务的支持mail默认是调用本机MTA发送邮件的，这意味着需要在本机上安装sendmail或postfixCentos5默认使用Sendmail邮件服务，开启方式/etc/init.d…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月20日
    5
  • 对java中bean的理解

    对java中bean的理解

    对java中bean的理解简单笼统的说就是一个类，一个可复用的类。javaBean在MVC设计模型中是model，又称模型层，在一般的程序中，我们称它为数据层，就是用来设置数据的属性和一些行为，然后我会提供获取属性和设置属性的get/set方法JavaBean是一种JAVA语言写成的可重用组件。为写成JavaBean，类必须是具体的和公共的，并且具有无参数的构造器。JavaBean通过提供符合一致性设计模式的公共方法将

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月8日
    23
  • js解压gzip_unzip解压命令

    js解压gzip_unzip解压命令

    js解压gzip_unzip解压命令//js解压gzipfunctionunzip(key){//解压//将二进制字符串转换为字符数组varcharData=key.split(”).map(function(x){returnx.charCodeAt(0);});//将数字数组转换成字节数组varbinData=newUint…

    全栈程序员-站长的头像 全栈程序员-站长
    2025年9月23日
    6
  • EnableEventValidation 是什麽東東？

    EnableEventValidation 是什麽東東？

    EnableEventValidation 是什麽東東？
    回发或回调参数无效。在配置中使用或在页面中使用<%@PageEnableEventValidation="true"%>启用了事件验证。出于安全目的，此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的，则使用ClientScriptManager.RegisterForEventValidation方法来注册回发或回调数据以进行验证。
    说明:执行

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月26日
    5
  • acwing-1183. 电力(割点Tarjan)

    acwing-1183. 电力(割点Tarjan)

    acwing-1183. 电力(割点Tarjan)给定一个由 n 个点 m 条边构成的无向图，请你求出该图删除一个点之后，连通块最多有多少。输入格式输入包含多组数据。每组数据第一行包含两个整数 n,m。接下来 m 行，每行包含两个整数 a,b，表示 a,b 两点之间有边连接。数据保证无重边。点的编号从 0 到 n−1。读入以一行 0 0 结束。输出格式每组数据输出一个结果，占一行，表示连通块的最大数量。数据范围1≤n≤10000,0≤m≤15000,0≤a,b<n输入样例：3 30 10 22 14 20 1

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月9日
    4
  • 主流量化交易的几种策略模型

    主流量化交易的几种策略模型

    主流量化交易的几种策略模型量化策略可以简单分为三类，分别是Alpha策略、CTA策略以及高频交易策略1.Alpha策略Alpha策略包含不同类别：按照研究内容来分，可分为基本面Alpha（或者叫财务Alpha）和量价Alpha。业内普遍不会将这两种Alpha完全隔离开。但是不同团队会按照其能力、擅长方向以及信仰，在做因子上有所偏向。有的团队喜欢用数据挖掘的方式做量价因子，而有的团队喜欢从基本面财务逻辑的角度出发，精细地筛选财务因子。。按照是否对冲可以分为两类。全对冲的叫做Alpha策略，不对冲的在市面上常被称作指

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月26日
    40

发表回复

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

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