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.13import QtQuick.Controls 2.13import 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.13import QtQuick.Controls 2.13import 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: 2 delegate: Rectangle{ id:rect color: "#666666" implicitWidth: 120 implicitHeight: 32 border.width: 1 border.color: "#848484" clip: true TextMetrics { id: textMetrics text: display } Text { text: display anchors.centerIn: parent font.pointSize: 12 color: "white" width: parent.width elide: Text.ElideRight leftPadding: 3 rightPadding: 3 MouseArea{ id:ma hoverEnabled: true anchors.fill: parent } ToolTip { height: 26 visible: ma.containsMouse && display !== "" && textMetrics.width > (rect.implicitWidth-6) contentItem: Text { text: display color: "#D6D6D6" } background: Rectangle { color: "#222222" } } } } }

【领QT开发教程学习资料，点击下方链接莬费领取↓↓，先码住不迷路~】

点击这里：

「链接」