將PySide中的string list當成data model傳給QML

本文將要說明如何將PySide中的string list當成data model,讓QML可以顯示它。首先,我們先看看Python的程式部分。

[][1]

#!/usr/bin/env python  
# coding: utf-8  

import sys  
import codecs  

# Workaround to handle exception of cp65001 issue.  
try:  
 codecs.lookup('cp65001')  
except:  
 def cp65001(name):  
 if name.lower() == 'cp65001':  
 return codecs.lookup('utf-8')  
 codecs.register(cp65001)  


from PySide.QtCore import *  
from PySide.QtGui import *  
from PySide.QtDeclarative import *  

# The string list to show.  
Zodiac = [  
 'Aries',  
 'Taurus',  
 'Gemini',  
 'Cancer',  
 'Leo',  
 'Virgo',  
 'Libra',  
 'Scorpius',  
 'Sagittarius',  
 'Capricornus',  
 'Aquarius',  
 'Pisces',  
 ]  

app = QApplication(sys.argv)  

view = QDeclarativeView()  

# Set model to view's context.  
ctx = view.rootContext()  
ctx.setContextProperty('exampleModel', Zodiac)  
view.setResizeMode(QDeclarativeView.SizeRootObjectToView)  
view.setSource(QUrl('main.qml'))  
view.show()  
app.exec_()  
這裡,我們建立了一個string list名為Zodiac,裡面放的就是黃道十二宮的名稱。要將任何資料由PySide傳遞給QML,最簡單的方式就是透過setContextProperty()來做。我們將Zodiac這個string list透過setContextProperty()將其命名為exampleModel,然後傳給QML。 PySide的部份就是這麼簡單,接下來就是QML的工作了。讓我們看看QML這邊要怎麼做:  
import QtQuick 1.0  
Rectangle {  
 width: 600  
 height: 600   
 Text {  
 id: caption  
 anchors.top: parent.top  
 anchors.left: parent.left  
 anchors.right: parent.right  
 height: 64  
 text: "Zodiac:"  
 font.pixelSize: 36  
 font.family: "Arial Black"   
 }  

 ListView {  
 anchors.top: caption.bottom  
 anchors.left: parent.left  
 anchors.bottom: parent.bottom  
 anchors.right: parent.right  
 clip: true  
 /* exampleModel is passed from main.py by setContextProperty(). */  
 model: exampleModel   
 delegate: Component {  
 Rectangle {  
 color: "silver"  
 width: 450  
 height: 64  
 border.color: "DarkBlue"  
 border.width: 5  
 anchors.topMargin: 10  
 anchors.bottomMargin: 10  
 anchors.leftMargin: 10  
 anchors.rightMargin: 10  
 anchors.horizontalCenter: parent.horizontalCenter  
 radius: 10   
 Text {   
 anchors.horizontalCenter: parent.horizontalCenter  
 /* The role of data in string list which made by PySide is  
 * 'modelData'. So we use modelData here to get the content  
 * of data.  
 */  
 text: modelData  
 font.pixelSize: 36  
 font.family: "Arial Black"  
 color: "DarkBlue"  
 }  
 }  
 }  
 }   
}  

這邊我們不多廢話的說明QML使用model的方法,這方面的資訊可以到QML的文件去查。這個QML中的重點有兩個地方,第一個就是我們要將前面PySide所指定的exampleModel property透過的model屬性指定給ListView。第二就是在ListView的delegate裡面,當string list指定給QML後,我們要記得此時預設的資料的role是叫做modelData。所以我們只需要在要顯示資料的地方放上modelData,string list的內容就會一個接著一個的被取出來。就是這麼簡單!

[1]:

comments powered by Disqus