跳到主要內容

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



張貼留言

這個網誌中的熱門文章

解決Python script無法在cp65001的console下執行的問題

你是否有這樣的經驗,明明沒問題的script,拿到某的電腦一直看到下面的訊息而無法執行。
LookupError: unknown encoding: cp65001 cp65001是什麼鬼!?其實,它就是UTF8阿!只是,Microsoft喜歡叫他cp65001(code page 65001號)。附帶一提,我們常用的Big5是cp950。想要知道你目前所使用的code page可以在Windows的console視窗執行

Portable Python

我常常需要把Python寫的script帶到其他電腦使用,因此,一個免安裝,可攜帶的Python就顯得十分重要。最近看過了幾個可攜式Python的方案,下面這個PortablePython是我覺得最合我意的方案。因為它提供了大部分會用到的Python module及工具,甚至連wxPython及PyGame也有。同時也有好用的Python編輯器PyScripter。所有開發Python所需的開發工具都一應俱全了!把它放到隨身碟中,就不用到處幫人安裝Python了。

PortablePython: http://www.portablepython.com/

有點兒怪的生蛋拌麵

前幾日在看日本的料理東西軍時,看到了一個料理是把麵煮好以後再把生蛋打上去攪和著吃。看起來滋味不俗!電視節目結束後立馬衝入廚房準備材料開始實作!

家裡沒有什麼蕎麥麵,就隨便拆了包泡麵煮熟,順便把冰箱裏面擺很久的甜不辣與貢丸拿出來一起煮熟,然後切條切片後放在麵上當配菜。