QML TableView表格使用示例

前言

QML中实现表格可以使用多种方式，比如直接使用ListView，定义每一行delegate，或者自定义Rectangle，放到Flipable中组合使用。Qt Quick Control1中从5.1版本开始就提供了表格控件，但是感觉不怎么好用，在Qt Quick Control2中 5.12版本开始又提供了一个专门用于做表格的控件TableView，相比于前面的方案，使用Tableview更加简单和直接。那么，接下来就看看Quick Control2 的TableView使用方法。

正文

我们直接针对两种常用的场景来通过示例说明。

场景一

第一种场景，每一列等宽，然后内容都是一致的（比如全是文本Text），这种无需定制每一列的delegate，所以只需要写一次即可。

示例：

代码：

import QtQuick 2.13
import QtQuick.Controls 2.13
import Qt.labs.qmlmodels 1.0Rectangle {Rectangle{id:headerwidth: parent.widthheight: 30Row{spacing: 0Repeater{model: ["name","age","class","number"]Rectangle{width: header.width/4height: header.heightcolor: "#666666"border.width: 1border.color: "#848484"Text {text: modelDataanchors.centerIn: parentfont.pointSize: 12color: "white"}}}}}TableView{id:tableViewwidth: parent.widthanchors.top:header.bottomanchors.left: parent.leftanchors.right: parent.rightanchors.bottom: parent.bottomclip: trueboundsBehavior: Flickable.OvershootBoundsScrollBar.vertical: ScrollBar {anchors.right:parent.rightanchors.rightMargin: 0visible: tableModel.rowCount > 5background: Rectangle{color:"#666666"}onActiveChanged: {active = true;}contentItem: Rectangle{implicitWidth  : 6implicitHeight : 30radius : 3color  : "#848484"}}model: TableModel {id:tableModelTableModelColumn{display: "name"}TableModelColumn{display: "age"}TableModelColumn{display: "class"}TableModelColumn{display: "number"}}delegate:Rectangle{color: "#666666"implicitWidth: tableView.width/4implicitHeight: 32border.width: 1border.color: "#848484"Text {text: displayanchors.centerIn: parentfont.pointSize: 12color: "white"}}}Component.onCompleted: {tableModel.appendRow({"name":"小明","age":12,"class":"三年二班","number":"003"})tableModel.appendRow({"name":"小刚","age":13,"class":"三年三班","number":"012"})tableModel.appendRow({"name":"小李","age":11,"class":"三年四班","number":"023"})tableModel.appendRow({"name":"小王","age":10,"class":"三年二班","number":"021"})tableModel.appendRow({"name":"小张","age":13,"class":"三年五班","number":"004"})tableModel.appendRow({"name":"小林","age":14,"class":"三年一班","number":"008"})}}

场景二

场景二，每一列内容不一样，需要单独定制
如图：

代码：

import QtQuick 2.13
import QtQuick.Controls 2.13
import Qt.labs.qmlmodels 1.0Rectangle {Rectangle{id:headerwidth: parent.widthheight: 30Row{spacing: 0Repeater{model: ["name","sex","id","option"]Rectangle{width: {var w = 0switch(index){case 0: w = 140;break;case 1: w = 90;break;case 2: w = 120;break;case 3: w = 150;break;}return w}height: header.heightcolor: "#666666"border.width: 1border.color: "#848484"Text {text: modelDataanchors.centerIn: parentfont.pointSize: 12color: "white"}}}}}TableView{id:tableViewwidth: parent.widthanchors.top:header.bottomanchors.left: parent.leftanchors.right: parent.rightanchors.bottom: parent.bottomclip: trueboundsBehavior: Flickable.OvershootBoundsScrollBar.vertical: ScrollBar {anchors.right:parent.rightanchors.rightMargin: 0visible: tableModel.rowCount > 5background: Rectangle{color:"#666666"}onActiveChanged: {active = true;}contentItem: Rectangle{implicitWidth  : 6implicitHeight : 30radius : 3color  : "#848484"}}model: TableModel {id:tableModelTableModelColumn{display: "name"}TableModelColumn{display: "sex"}TableModelColumn{display: "id"}TableModelColumn{display: "option"}}delegate:DelegateChooser{DelegateChoice{column: 0delegate: Rectangle{color: "#666666"implicitWidth: 140implicitHeight: 32border.width: 1border.color: "#848484"Text {text: displayanchors.centerIn: parentfont.pointSize: 12color: "blue"}}}DelegateChoice{column: 1delegate: Rectangle{color: "#666666"implicitWidth: 90implicitHeight: 32border.width: 1border.color: "#848484"Text {text: displayanchors.centerIn: parentfont.pointSize: 12color: "white"}}}DelegateChoice{column: 2delegate: Rectangle{color: "#666666"implicitWidth: 120implicitHeight: 32border.width: 1border.color: "#848484"clip: trueText {text: displayanchors.centerIn: parentfont.pointSize: 12color: "white"}}}DelegateChoice{column: 3delegate: Rectangle{color: "#666666"implicitWidth: 150implicitHeight: 32border.width: 1border.color: "#848484"Button{width: 70height: 25anchors.centerIn: parenttext: "Delete"background: Rectangle{radius: 4color: "cyan"}onClicked: {console.log("btn clicked row:",row)}}}}}}Component.onCompleted: {tableModel.appendRow({"name":"小明","sex":"男","id":"w0000065628743342144321241","option":true})tableModel.appendRow({"name":"小刚","sex":"女","id":"w0000065628743342144312312","option":true})tableModel.appendRow({"name":"小李","sex":"男","id":"w0000065628743342144315433","option":true})tableModel.appendRow({"name":"小王","sex":"男","id":"w0000065628743342144313254","option":true})tableModel.appendRow({"name":"小张","sex":"女","id":"w0000065628743342144316573","option":true})tableModel.appendRow({"name":"小林","sex":"男","id":"w0000065628743342144311232","option":true})}}

解决表格中文字显示不下的问题

从上面场景二的示例中看到第三列文字显示不下，这种情况下，通常会将文字省略显示，超出部分用“…”代替，然后做tips，实现方式如下：

当鼠标移动到文字上时做ToolTip

代码，修改第三列：

DelegateChoice{column: 2delegate: Rectangle{id:rectcolor: "#666666"implicitWidth: 120implicitHeight: 32border.width: 1border.color: "#848484"clip: trueTextMetrics {id: textMetricstext: display}Text {text: displayanchors.centerIn: parentfont.pointSize: 12color: "white"width: parent.widthelide: Text.ElideRightleftPadding: 3rightPadding: 3MouseArea{id:mahoverEnabled: trueanchors.fill: parent}ToolTip{height: 26visible: ma.containsMouse && display !== "" && textMetrics.width > (rect.implicitWidth-6)contentItem: Text {text: displaycolor: "#D6D6D6"}background: Rectangle {color: "#222222"}}}}}

本文Demo下载地址

QML TableView表格使用示例相关推荐

Qt qml TableView 表格编辑器
简介: 这是一个使用Qt + qml制作的表格编辑器. 主要围绕TableView控件做一系列功能拓展. TableView对应的数据model,使用Qml/ListModel,数据的创建.导入等操作 ...
php多表头表格,HTML多表头表格代码示例
1.多表头表格代码多表头表格 body{ width:98%; height:100%; font-size:12px; background-color:#FCF; text-align:cent ...
python批量分析表格_示例python 批量操作excel统计销售榜品牌及销售额
示例统计销售榜品牌及销售额 importpandas as pdimportnumpy as npimportos os.chdir('F:\\50mat\源数据1000张表格') name= '户外 ...
mysql tableveiw与表格,javafx将数据库内容输出到tableview表格
一 .创建Fxml文件,用Javafx Scene Builder 编辑页面,创建tableview(表格)和tablecolum(表格中的列),并为其设置fxid: 二.生成fxml文件的控制类: ...
tableView表格重写表头增加全选功能和实现翻页（读写excel和读ini）
一:重写表头文件 HeaderView.h #pragma once #ifndef HEADERVIEW_H #define HEADERVIEW_H#include <QObject> ...
qml tableview
tableview的排序功能,qt官方示例有,可以參考做,qt官方实例如下: Qt Quick Controls 1 - Table View Example QML type registratio ...
JavaFx之TableView表格操作----增删改及行多选
最近因项目开发需要,需要开发一个小工具对项目设备进行管理,JavaFx作为java桌面程序开发的一个利器,成为首选. IDEA集成开发工具为我们提供开发JavaFx项目的环境,支持可视化编程,布局支持 ...
EasyExcel导入和导出excel数据表格用法示例
说明:平时项目中经常有需要把excel表格中的数据导入库中,或者需要把查询出来的数据导出到excel文件中,今天就来介绍阿里的 easyexcel 的用法一.SpringBoot集成EasyExce ...
html5列表标签代码,HTML5列表标签和表格标签(示例代码)
一.列表 1.1 什么是列表标签? 作用:给一堆数据添加列表语义,也就是告诉搜索引擎告诉浏览器这一对数据是一个整体无序列表---unordered-list(最多):新闻列表.导航.商品列表作用: ...

QML TableView表格使用示例

前言

正文

场景一

场景二

解决表格中文字显示不下的问题

QML TableView表格使用示例相关推荐

最新文章

热门文章