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


相关推荐

  • java怎么测试_java中如何使用Junit测试[通俗易懂]

    java怎么测试_java中如何使用Junit测试[通俗易懂]

    java怎么测试_java中如何使用Junit测试[通俗易懂]java中如何使用Junit测试一、总结一句话总结：a、单元测试的测试代码在test文件夹下，和源码不在同一个文件夹下b、测试的类方法都以test开头，后面接要测试的类或者方法的名字1、JUnit中什么时候使用assertTrue，assertFalse语句？true通过false通过assertTrue(booleancondition);condition:如果condition结果为t…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月8日
    19
  • 知识图谱入门 (七) 知识推理

    知识图谱入门 (七) 知识推理

    知识图谱入门 (七) 知识推理欢迎大家关注我的博客http://pelhans.com/，所有文章都会第一时间发布在那里哦~本节对本体任务推理做一个简单的介绍，并介绍本体推理任务的分类。而后对本体推理的方法和工具做一个介绍。知识推理简介知识推理任务分类所谓推理就是通过各种方法获取新的知识或者结论，这些知识和结论满足语义。其具体任务可分为可满足性(satisfiability)、分类(clas…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月12日
    28
  • HTML5实现IP Camera网页输出

    HTML5实现IP Camera网页输出

    HTML5实现IP Camera网页输出

    全栈程序员-站长的头像 全栈程序员-站长
    2022年1月26日
    70
  • SQL模糊查询LIKE「建议收藏」

    SQL模糊查询LIKE「建议收藏」

    SQL模糊查询LIKE「建议收藏」%由零个或者多个字符组成的任意字符串_任意单个字符串[]指定范围，例如[A~F]表示A到FZ范围内任意单个字符串[^]指定范围之外，例如[^A~F]表示A到F范围以外任意单个字符串LIKE通配符LIKE‘%ma%’…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月29日
    72
  • UGUI合批drawcall高的原因「建议收藏」

    UGUI合批drawcall高的原因「建议收藏」

    UGUI合批drawcall高的原因「建议收藏」各个UI界面Batches高的原因通用原因1.UI重叠打断合批增加一倍的drawcall特别是列表里面的重叠https://zhuanlan.zhihu.com/p/431118062.空图片例如ScrollRect已经下面的View可考虑使用空的Text或者写一个类继承MaskableGraphic不绘制使用UpdateGeometry不绘制3.都是散图可考虑系统按钮作为一个图集活动图标作为一个图集…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月18日
    1
  • arcgis最佳路径分析步骤_基于arcgis的住房选址分析

    arcgis最佳路径分析步骤_基于arcgis的住房选址分析

    arcgis最佳路径分析步骤_基于arcgis的住房选址分析使用ArcGISNetworkAnalyst模块进行最佳路径分析，可以根据不同的需求，进行相关设置，得到不同意义的最佳路径。例如，省汽油；省驾驶时间；省等待时间；交叉路口最少；自驾旅游可以规划沿途风景最好的路径等等。

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月24日
    11

发表回复

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

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