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"});
                    }
                }
            }

 

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • GROUP BY和HAVING用法介绍

    GROUP BY和HAVING用法介绍一、groupby和having1、满足“SELECT子句中的列名必须为分组列或列函数”,因为SELECT有groupby中包含的列2、having必须和groupby一起用,且在groupby后面3、groupby、having、orderby的使用顺序:groupby、having、orderbySELECT*|字段列表[as别名]FROM表名[WHERE子句][GROUPBY子句][HAVING子句][ORDERBY子句][LIMIT…

  • QTabWidget的样式「建议收藏」

    QTabWidget的样式「建议收藏」Tab标签所在行的样式QTabWidget::tab-bar{alignment:left;top:3px;left:5px;right:5px;}设置QTabWidget的Tab标签下面窗格的样式QTabWidget#tabwidget_DevMang::pane{border-top:3pxsolidblack;border-…

  • c# 基础语法

    c#基础语法基础语法第一个程序usingSystem;namespaceConsoleApp1{classProgram{staticvoidMain(string[]a

    2021年12月13日
  • Java之GUI编程(一)

    Java之GUI编程(一)

  • Python – 两数之和

    Python – 两数之和给定列表a和一个目标值target,求列表中两数之和为target的值的索引;a=[1,5,6,8,9,4,5,6,3,2,1,7,5,6,9,8,4,5,6,2,1,0,1,2,0,1,2,5,9,10]b=[11,55,88,99,66,4,77,33,22,1,6,12,35]穷举(适应性强)defx(nums,target):result=[]…

  • AnalyticDB_分布式分析型数据库

    AnalyticDB_分布式分析型数据库AnalyticDB分析型数据库本文初衷是为了学习归纳,若有错误,请指出。修改记录时间内容2020年9月13日第一次发布一、概述1.1定义​ 分析型数据库AnalyticDB(原名ADS)是阿里巴巴针对海量数据分析自主研发的实时高并发在线分析系统,可以针对万亿级别的数据进行多维度分析透视和业务探索。采用分布式计算,具有强大的实时计算能力。1.2特点​ 主要特点就是实时和高并发,可以针对万亿级别的数据进行多纬度分析透视和业务探索。兼容MySQL、B

发表回复

您的电子邮箱地址不会被公开。

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