从另一个qml文件中读取数据并显示在ListView中

来源:互联网 发布:node express作用 编辑:程序博客网 时间:2024/06/03 11:15

http://blog.csdn.net/csfreebird/article/details/18077839


从下面的文档,你可以看到一些代码片段演示了如何创建一个简单的ListView.

http://doc-snapshot.qt-project.org/qdoc/qml-qtquick-listview.html#model-prop

我把这些组装起来,放在一个演示程序中。在我的项目中,目录结构如下:

[plain] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. listview1$ tree  
  2. .  
  3. ├── imports  
  4. │   └── model  
  5. │       ├── ContactModel.qml  
  6. │       └── qmldir  
  7. ├── run.sh  
  8. └── test.qml  

这个演示程序包含了一个test.qml文件和另一个plugin. 这个plugin只包含了一个ContactModel.qml文件,没有C++动态库。

qmldir描述了从这个plugin暴露出来的module.

[plain] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. module model  
  2. ContactModel 1.0 ContactModel.qml  


这个ContactModel.qml文件是一个用于给ListView提供数据的model.

[plain] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. import QtQuick 2.0  
  2. ListModel {  
  3.     ListElement {  
  4.         name: "Bill Smith"  
  5.         number: "555 3264"  
  6.     }  
  7.     ListElement {  
  8.         name: "John Brown"  
  9.         number: "555 8426"  
  10.     }  
  11.     ListElement {  
  12.         name: "Sam Wise"  
  13.         number: "555 0473"  
  14.     }  
  15. }  

在test.qml文件中,将ContactModel应用到model属性上。delegate是用于遍历model中所有ListElements的方法,并且将每个ListElement作为一个Text 块显示在窗口。

[plain] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. import QtQuick 2.0  
  2. import model 1.0  
  3. ListView {  
  4.     width: 180; height: 200  
  5.     model: ContactModel {}  
  6.     delegate: Text {  
  7.         text: name + ": " + number  
  8.     }  
  9. }  

要编译这个程序,运行下面的命令:

[plain] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. qmake  
  2. make  

要运行的话:

[plain] view plaincopyprint?在CODE上查看代码片派生到我的代码片
  1. ~/Qt5.2.0/5.2.0/gcc_64/bin/qmlscene -I ./imports ./test.qml  

0 0