QMLTableView编辑使⽤
在开发中，表格使⽤还是很频繁的。qt例⼦中的⽐较丑，⾏⾼不能修改。本例QML实现动态表头、添加数据，⾃定义样式，修改⾏⾼，在c++中动态添加数据等。
具体效果如下：
核⼼代码TableViewItem.qml
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
Item {
//In: parent
width: 500; height: 400
//[add header]
function addColunm(rolorstr, titlestr)
{
var prefix = 'import QtQuick 2.7;import QtQuick.Controls 1.4;TableViewColumn {width: tableView.viewport.lumnCount;';
//创建TableViewColumn的代码
//循环添加TableViewColumn
var str = prefix  +"role:\"" + rolorstr + "\";title:\"" + titlestr + "\"}";
tableView.ateQmlObject(str,tableView,"qrc:/TableViewItem.qml"));
}
//[!add header]
//[addrowdata]
function addRowData(d)
{
tablemode.append(d);
}
//[!addrowdata]
/
ListModel {
ListModel {
id: tablemode
ListElement {
title: "A"
author: "Gabriel"
}
ListElement {
title: "Brilliance"
author: "Jens"
}
ListElement {
title: "Outstanding"
author: "Frederik"
}
}
TableView{
id :tableView
anchors.fill: parent
alternatingRowColors : false
TableViewColumn {
role: "title"
title: "Title"
width: tableView.viewport.lumnCount              }
TableViewColumn {
role: "author"
title: "Author"
width: tableView.viewport.lumnCount          }
model: tablemode
//⾃定义表头代理
headerDelegate:
Rectangle{
//color: "#00498C"qt viewport
gradient: Gradient {
GradientStop { position: 0.0; color: "#085FB2" }
GradientStop { position: 1.0; color: "#00498C" }
}
//color : styleData.selected ? "blue": "darkgray"
width: 100;
height: 40
/
/border.width: 1
//radius: 5
Text
{
text: styleData.value
font.pixelSize: parent.height*0.5
}
}
//⾏代理可以修改⾏⾼等信息
rowDelegate: Rectangle {
height: 50
color: "#052641"
anchors.leftMargin: 2
}
itemDelegate: Rectangle{
//color: "#052641"
border.width: 1
color : styleData.selected ? "#dd00498C": "#052641"
color : styleData.selected ? "#dd00498C": "#052641"
Text {
anchors.verticalCenter: parent.verticalCenter
/
/anchors.fill: parent
anchors.leftMargin: 5
color : styleData.selected ? "#00CCFE": "white"
text: styleData.value
font.pixelSize: parent.height*0.4
}
}
style: TableViewStyle{
textColor: "white"
highlightedTextColor : "#00CCFE"  //选中的颜⾊
backgroundColor : "#052641"
}
}
}
使⽤⽅式
import QtQuick2.6
import QtQuick.Window2.2
import QtQuick.Controls1.4
import QtQuick.Controls.Styles1.4
import QtQuick.Layouts1.1
Window{
visible:true
width:640
height:480
title:qsTr("Hello World")
objectName:"root"
color:"#0C1F31"
Rectangle{
width:30;height:30
color:"blue";
MouseArea{
anchors.fill:parent
onClicked:{
console.log(Date().toLocaleString(Qt.locale("de_DE")))
for(var i=0;i<10;++i)
item.addRowData({title:"addd"+i,author:"ts"});
//item.addColunm("s"+i,"d")
console.log(Date().toLocaleString(Qt.locale("de_DE")))
}
onWheel:{
if(wheel.angleDelta.y>0)
item.scale=item.scale*1.2;
else
item.scale=item.scale*0.8;
}
}
}
TableViewItem{
id:item
objectName:"tableview"
x:30;y:100
//In:parent
}
}
在c++中动态添加数据
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
Objects().isEmpty())
return-1;
QQuickItem*Objects().at(0)->findChild<QQuickItem*>("tableview");
qDebug()<<item->objectName();
QVariantMap m;
m.insert("title","ssssxx");
m.insert("author","ceshi");
QMetaObject::invokeMethod(item,"addRowData",Q_ARG(QVariant,m)); //调⽤函数

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。