在今天的这篇文章中,我们将介绍如何读取一个CSV文件,并使用一个table进行展示数据。我们知道在Ubuntu平台中目前没有移植TableView。那么我们怎么来展示一个Table的数据呢? 答案是使用我们的ListItem。关于ListItem的更多的描述,大家可以参阅文章“浅叙Ubuntu.Components 1.2中的ListItem控件”。
首先,在Ubuntu桌面上,我们可以使用我们的LibreOffice来创建一个我们的数据表:
我们可以通过“Save as”菜单把我们的表格存为一个CSV的文件格式:
CSV格式的文件实际上是以分号分开的格式文件:
张三,1981.1.1,男,北京市,街道胡同号234567
李四,1982.2.2,男,南京市,街道胡同号234567
王红,1990.5.20,女,深圳市,街道胡同号234567
王五兰,2000.10.1,男,成都市,街道胡同号234567
陈建东,1985.11.23,男,上海市,街道胡同号234567
我们可以创建一个最简单的qmlproject应用,并把我们刚才创建好的csv文件考入到项目的根目录中。
为了读取这个文件,我们定义一个自己的model来供我们的ListView来使用:
AppModel.qml
import QtQuick 2.0
Item {
property string source: ""
property ListModel model : ListModel { id: jsonModel }
property alias count: jsonModel.count
function createPerson(r) {
return {
"name": r[0],
"birthday":r[1],
"sex":r[2],
"city":r[3],
"address":r[4]
};
}
onSourceChanged: {
console.log("Loading " + source)
var xhr = new XMLHttpRequest;
xhr.open("GET", source);
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
var doc = xhr.responseText;
console.log("doc: " + doc);
var records = xhr.responseText.split('\n');
console.log("length: " + records.length)
for ( var i = 0; i < records.length; i++ ) {
console.log("record: " + i + " " + records[i]);
var r = records[i].split(',');
if ( r.length === 5 )
jsonModel.append(createPerson(r));
}
}
}
xhr.send();
}
}
一旦有了数据,我们就可以通过我们的ListView来显示为我们的数据。尽管我们没有TableView这样的API供我们使用,我们可以通过
ListItem来完成我们的相应的功能。
Main.qml
import QtQuick 2.0
import Ubuntu.Components 1.2
/*!
\brief MainView with a Label and Button elements.
*/
MainView {
// objectName for functional testing purposes (autopilot-qt5)
objectName: "mainView"
// Note! applicationName needs to match the "name" field of the click manifest
applicationName: "tableview.liu-xiao-guo"
/*
This property enables the application to change orientation
when the device is rotated. The default is false.
*/
//automaticOrientation: true
// Removes the old toolbar and enables new features of the new header.
// useDeprecatedToolbar: false
width: units.gu(60)
height: units.gu(85)
Page {
title: i18n.tr("tableview")
AppModel {
id: appmodel
source: "file.csv"
}
ListView {
id: listview
anchors.fill: parent
model: appmodel.model
delegate: ListItem {
id: del
width: listview.width
height: layout.childrenRect.height + units.gu(1)
Rectangle {
anchors.fill: parent
color: index%2 == 0 ? "Azure" : "Beige"
}
Column {
id: layout
width: listview.width
spacing: units.gu(1)
Item {
width: parent.width
height: name.height
Label { id: name; x: units.gu(1); text: model.name }
Label { id: birthday; x: del.ListView.view.width/4; text: model.birthday }
Label { id: sex; x: listview.width/2; text: model.sex }
Label { id: city; x: listview.width*3/4; text: model.city }
}
Label {
text: model.address
fontSize: "large"
anchors.right: parent.right
anchors.rightMargin: units.gu(1)
}
}
}
}
}
}
我们的显示也非常地简单。我们直接在ListItem中使用了一个二行的显示。第一行是四个Label,分别用于显示我们的数据表中的数据。同时我们在第二行中显示地址信息。这在标准的TableView中是没法实现的。从某种程度上讲,我们的ListItem是非常灵活的。
运行为我们的应用:
显然,我们使用ListView也同样很好地展示了我们的数据。