本博只是简单的展示TableView的基本使用(TableView、style:TableViewStyle、headerDelegate、rowDelegate、itemDelegate、TableViewColumn、ListModel及访问和修改Model),关于更多属性和方法的使用可以参考TableView QML Type

1. 效果图

  

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:
height:
title: qsTr("Hello World") TableView
{
id:stockTable; anchors.left: parent.left;
anchors.top:parent.top;
anchors.topMargin: ;
anchors.right: parent.right;
anchors.bottom: parent.bottom;
//alternatingRowColors : true;
style:TableViewStyle
{
id:tstyle;
backgroundColor:"white";
alternateBackgroundColor:"#f6F6F6";
textColor:"black"; // 设置TableView的头部
headerDelegate: Canvas
{
implicitWidth:;
implicitHeight:; onPaint:
{
var ctx = getContext("2d");
ctx.lineWidth = ;
ctx.strokeStyle="red";
ctx.fillStyle="blue"; ctx.beginPath();
console.log("width:",width,"--","height:",height);
ctx.rect(,,width,height);
ctx.stroke();
ctx.font="14pt sans-serif";
ctx.textAlign="right"
ctx.textBaseLine="middle";
ctx.fillText(styleData.value,width-,height/+);
}
} // 设置行
rowDelegate:Rectangle
{
height:;
color: styleData.selected? "red":
(styleData.alternate ? tstyle.backgroundColor :
tstyle.alternateBackgroundColor);
} // 设置单元格
itemDelegate: Text
{
text:styleData.value;
font.pointSize:;
verticalAlignment:Text.AlignVCenter;
horizontalAlignment:Text.AlignRight;
}
} TableViewColumn
{
role:"code";
title:qsTr("Code");
width:;
movable: false;
} TableViewColumn
{
role:"name";
title:qsTr("Name");
width:;
movable: false;
} ListModel {
id: libraryModel
ListElement {
code: ""
name: "500ETF"
}
ListElement {
code: ""
name: "中信证券"
}
ListElement {
code: ""
name: "迪安诊断"
}
} model: libraryModel;
}
}

3. 访问和修改Model

(1) 访问数据

    itemDelegate: Text
{
text:styleData.value;
font.pointSize:;
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:;
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:;
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:;
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"});
}
}
}

Qt Quick之TableView的使用的更多相关文章

  1. Qt 学习之路 :Qt Quick Controls

    自 QML 第一次发布已经过去一年多的时间,但在企业应用领域,QML 一直没有能够占据一定地位.很大一部分原因是,QML 缺少一些在企业应用中亟需的组件,比如按钮.菜单等.虽然移动领域,这些组件已经变 ...

  2. Qt Quick Controls 与 Qt Quick Controls 2的区别(详细对照)

    Qt Quick Controls 原本是为支持桌面平台而开发的,后来又加入了移动平台和嵌入式平台的支持.它们应用非常广泛,因为它们提供了足够灵活的样式系统,以允许开发具有平台相关或者无关风格的应用程 ...

  3. 《Qt Quick 4小时入门》学习笔记4

    http://edu.csdn.net/course/detail/1042/14806?auto_start=1 Qt Quick 4小时入门 第七章:处理鼠标与键盘事件 1.处理鼠标事件 鼠标信号 ...

  4. 《Qt Quick 4小时入门》学习笔记3

    http://edu.csdn.net/course/detail/1042/14807?auto_start=1 Qt Quick 4小时入门 第八章:Qt Quick中的锚(anchors)布局 ...

  5. 《Qt Quick 4小时入门》学习笔记2

    http://edu.csdn.net/course/detail/1042/14805?auto_start=1   Qt Quick 4小时入门 第五章:Qt Quick基本界面元素介绍   1. ...

  6. 《Qt Quick 4小时入门》学习笔记

    http://edu.csdn.net/course/detail/1042/14804?auto_start=1   Qt Quick 4小时入门 第五章:Qt Quick里的信号与槽   QML中 ...

  7. 从头学Qt Quick(3)-- 用QML写一个简单的颜色选择器

    先看一下效果图: 实现功能:点击不同的色块可以改变文字的颜色. 实现步骤: 一.创建一个默认的Qt Quick工程: 二.添加文件Cell.qml 这一步主要是为了实现一个自定义的组件,这个组件就是我 ...

  8. 从头学Qt Quick(1) --体验快速构建动态效果界面

    自2005年Qt4发布以来,Qt已经为成千上万的应用程序提供了框架服务,现在Qt已经基本上支持所有的开发平台了,这里面既包含了桌面.嵌入式领域,也包括了Android.IOS.WP等移动操作平台,甚至 ...

  9. Qt Quick实现的涂鸦程序

    之前一直以为 Qt Quick 里 Canvas 才干够自绘.后来发觉不是,原来还有好几种方式都能够画图! 能够使用原始的 OpenGL(Qt Quick 使用 OpenGL 渲染).能够构造QSGN ...

随机推荐

  1. PHP-Manual的学习----【序言】

    2017年6月27日16:57:32 学习资料:2015-PHP-Manual 打好坚实的基础是做任何事的前提 序言: 笔记: 1.PHP,即"PHP: Hypertext Preproce ...

  2. Lumen开发:lumen源码解读之初始化(3)——单例(singleton)与中间件(Middleware)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 今天来讲讲Lumen的singleton和Middleware,先来看看起始文件bootstrap/app.php / * | --------- ...

  3. Jmeter监控Linux服务器性能

    ①.下载JMeterPlugins相关的jar包,放jmeter的安装路径\lib\ext下——这个时候启动jmeter会发现,添加监听器时,出现了一堆的jp@jc……,这些就是插件的功劳. JMet ...

  4. IOS ARC内存管理,提高效率避免内存泄露

    本文转载至 http://blog.csdn.net/allison162004/article/details/38756263 Cocoa内存管理机制 (1)当你使用new.alloc.copy方 ...

  5. Pycharm 中错误ImportError: No module named appium

    Q: Pycharm 中错误ImportError: No module named appium A: Pycharm IDE Preferences -> Project Interpret ...

  6. ArcGIS API for js Legend(图例)

    1.说明 有关怎么把ArcGIS API for js部署到IIS上,请参考我上面的写的博客https://www.cnblogs.com/net064/p/10302660.html 2.运行效果 ...

  7. debian安装oracle jdk

    1 去官网下载linux jdk https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htm ...

  8. 【JavaScript专题】--- 立即执行函数表达式

    一 什么是立即执行函数表达式 立即执行函数表达式,其实也可以叫初始化函数表达式,英文名:IIFE,immediately-inovked-function expression.立即执行函数表达式就是 ...

  9. android 多语言(在APP里面内切换语言)

    创建SharedPreferences的管理类 public class PreferenceUtil { private static SharedPreferences mSharedPrefer ...

  10. memcpy使用

    void memcpy(void dest, const void *src, size_t n); 功能编辑 从源src所指的内存地址的起始位置开始拷贝n个字节到目标dest所指的内存地址的起始位置 ...