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)
上一篇 2021年12月29日 下午3:00
下一篇 2021年12月29日 下午4:00


相关推荐

  • Latex插入图片参数设置

    Latex插入图片参数设置常用选项[htbp]是浮动格式:『h』当前位置。将图形放置在正文文本中给出该图形环境的地方。如果本页所剩的页面不够,这一参数将不起作用。『t』顶部。将图形放置在页面的顶部。『b』底部。将图形放置在页面的底部。『p』浮动页。将图形放置在一只允许有浮动对象的页面上。一般使用[htb]这样的组合,只用[h]是没有用的。这样组合的意思就是latex会尽量满足排在前面的浮动格式,就是h-t-b这个…

    2022年5月31日
    42
  • SLAM理论_技术这么好有用不上

    SLAM理论_技术这么好有用不上原文链接:https://cloud.tencent.com/developer/article/1005894导语随着最近几年机器人、无人机、无人驾驶、VR/AR的火爆,SLAM技术也为大家熟知,被认为是这些领域的关键技术之一。本文对SLAM技术及其发展进行简要介绍,分析视觉SLAM系统的关键问题以及在实际应用中的难点,并对SLAM的未来进行展望。1.SLAM技术SLAM…

    2026年4月17日
    4
  • 百度一下!你就知道!

    百度一下!你就知道!

    2026年3月16日
    12
  • lldp协议代码阅读_LLDP(lldp协议平时开启还是关闭)

    lldp协议代码阅读_LLDP(lldp协议平时开启还是关闭)没设备,没法试试ndp,不知道disndp是什么效果,和dislldp。有什么区别呢。NDP是邻居发现协议,他也是通过HELLO包机制发现邻居,DISNDP可以看到和它互联的同品牌设备的基本信息以及互联端口。你好!应该是LLDPE产品吧,是线性低密度聚乙烯,主要用来做滚塑产品的我的回答你还满意吗~~不兼容,lldp是lldp,cdp是cdp,现在cisco的设备一般都能支持lldp,lld…

    2022年6月2日
    135
  • Linux入门(三)

    Linux入门(三)

    2022年3月8日
    42
  • Declare 用法

    Declare 用法用途说明 declare 命令是 bash 的一个内建命令 它可以用来声明 shell 变量 设置变量的属性 Declarevaria orgivethemat 该命令也可以写作 typeset 虽然人们很少使用这个命令 如果知道了它的一些用法 就会发现这个命令还是挺有用的 nbsp nbsp 常用参数格式 declare 格式 typeset

    2026年3月17日
    2

发表回复

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

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