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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Springboot 整合RabbitMq ,用心看完这一篇就够了

    Springboot 整合RabbitMq ,用心看完这一篇就够了该篇文章内容较多,包括有rabbitMq相关的一些简单理论介绍,provider消息推送实例,consumer消息消费实例,Direct、Topic、Fanout的使用,消息回调、手动确认等。(但是关于rabbitMq的安装,就不介绍了)在安装完rabbitMq后,输入http://ip:15672/,是可以看到一个简单后台管理界面的。在这个界面里面我们可以做些什么?可以手动创建…

    2022年5月15日
    30
  • windows远程桌面,停留在“请稍后”页面[通俗易懂]

    windows远程桌面,停留在“请稍后”页面[通俗易懂]最近登陆局域网远程桌面,输入账号密码,停留在“请稍后”页面,卡半天也进不去。我的解决方法:1.注销其他远程登陆帐户。2.重新连接远程桌面。

    2022年10月24日
    0
  • EasyCVR通过Ehome协议接入部分设备显示离线排查报告

    EasyCVR通过Ehome协议接入部分设备显示离线排查报告对于需要将不同视频协议做融合的项目,我们一般都是建议大家选用EasyCVR视频平台,EasyCVR支持多种协议的视频接入,对于通用的第三方协议,我们支持了海康的Ehome和GB28181的国标协议。EasyCVR视频网关平台接入的部分Ehome设备显示离线,可以从下图中看到,除了通过HIKSDK接入的设备外,通过Ehome接入的设备全部离线:可见离线的部分设备都是Ehome协议接入,Ehome设备为主动注册类型,判断设备是否真实在线的方法一般为抓取对应对端口7660的包,或者是在海康sdk的回调

    2022年10月28日
    0
  • android一个弹出菜单的动画(二)「建议收藏」

    android一个弹出菜单的动画(二)

    2022年1月26日
    190
  • 用python爬虫爬取网页信息_爬虫python

    用python爬虫爬取网页信息_爬虫python【一、项目背景】[蜜柑计划-MikanProject]:新一代的动漫下载站。是一个专门为喜欢动漫的小伙伴们打造的动漫视频在线播放网站,为大家第一时间分享最新动漫资源,每日精选最优质的动漫推荐。【二、项目目标】实现获取动漫种子链接,并下载保存在文档。【三、涉及的库和网站】1、网址如下:https://mikanani.me/Home/Classic/{}2、涉及的库:reques**ts、lxml、fake_useragent**3、软件:PyCharm【四、项目分析】…

    2022年10月21日
    0
  • 利用charles抓包

    利用charles抓包charles是一款http抓包软件,和fiddler极为相似,所以大家就会问,为啥不用fiddler呢,因为mac没有fiddler。而且charles还是付费版本。所以我们这里从安装破解到抓包成功一步一步讲清楚。下载并安装我们进入charles官网进行下载:https://www.charlesproxy.com/latest-release/download.do,我是mac,所以选择其中的macOS下载dmg包之后我们正常的安装,安装完成打开,大概就是这样的模样破解我们打开激活码生成界

    2022年6月6日
    44

发表回复

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

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