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

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

#!/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的內容就會一個接著一個的被取出來。就是這麼簡單！