Динамическое создание объектов, то ли ListBox с картинками Python на Ubuntu Touch

[исходный код проекта можно скачать здесь]

Создадим новый проект в Clickable, в терминале вводим команду:

clickable create

Выбираем тип проекта Python и заполняем:
Title [App Title]: Example Listbox App Name [appname]: example-listbox

Удаляем все лишнее в Main.qml и приводим к виду:

MainView {
    id: root
    objectName: 'mainView'
    applicationName: 'example-listbox.yourname'
    automaticOrientation: true
    width: units.gu(45)
    height: units.gu(75)

    ListView {
        id: grig 
        anchors{
            fill: parent
            margins : units.gu(1);
        }
        spacing: units.gu(0.5)
        model: listModel
        delegate: ImgItem {
            text: txt
            image: img
        }
    }
    ListModel{
        id:listModel
    }
}

Теперь создадим сам элемент - ImgItem.qml

/*  ImgItem.qml */
import QtQuick 2.7
import QtQuick.Controls 2.2

Rectangle {
        id: root
        radius: units.gu(0.5)
        border.width: units.gu(0.1)
        border.color: "#eee"
        width: parent.width
        height: childrenRect.height

    property alias image: img.source
    Image {
      id: img
      width: units.gu(10)
      height: {
        if (root.height < units.gu(10)) {
            units.gu(10)
          } else {
            root.height
          }
        }
      verticalAlignment: Image.AlignTop
      fillMode: Image.PreserveAspectFit
      anchors{
          top: parent.top
          left: parent.left
        }
    }
    property alias text: label.text
    Text {
        id: label
        font.pixelSize: units.gu(3)
        anchors{
          top: parent.top
          left: img.right
          right: parent.right
        }
        wrapMode : Text.WordWrap
        verticalAlignment: Text.AlignVCenter
        color: "#111"
    }
}

Таким образом мы создали ListView, каждый будущий элемент которого, основывается на ImgItem. Что бы задавать свойства нашего объекта, в ImgItem.qml мы связали две переменные: image: img.source text: label.text Теперь в ListView, мы назначили связь этих свойств: text: txt image: img Сама же модель вынесена в отдельный объект listModel, с ней мы теперь и будем работать.

В папке проекта, находим src. В этом каталоге, создаем папку img. И загружаем в нее картинки из архива. img.zip

example.py приводим к виду:

import random
txt = [
  "Знаешь, родители — это просто дети, у которых есть дети.",
  "Нельзя заставить людей любить тебя. Нужно просто подождать, пока им надоест тебя ненавидеть.",
  "Слушайте: я знаю, что вы во многом очень не похожи. Но вы должны понять, что с точки зрения дедушки... вы оба — куски говна.",
  "Хочешь слышать приятные слова? Встречайся с лингвистом!",
  "— Ты плачешь?\n— Нет, у меня просто аллергия на гавнюков.",
  "Иногда наука больше искусство, чем наука. Многие люди не понимают этого.",
  "Своими мозгами думайте, не будьте тупым стадом.",
  "Wubba lubba dub dub."
]

def speak():
    img="../src/img/"+str(random.randint(0,19))+".png"
    text=txt[random.randint(0,len(txt))]
    return [img,text]

Теперь в Main.qml добавляем объект Python:

Python {
    id: python
    Component.onCompleted: {
        addImportPath(Qt.resolvedUrl('../src/'));
        for (var i = 0; i < 10; i++)  {
        importModule('example', function() {
            console.log('module imported');
            python.call('example.speak', [], function(returnValue) {
                var newItem = {}
                newItem.img = returnValue[0]
                newItem.txt = returnValue[1]
                listModel.append(newItem)
            })
        });
        }
    }
    onError: {
        console.log('python error: ' + traceback);
    }
}

Таким образом, вызывая example.speak, вы создаем новый объект. Ему назначаем свойства из возвращенного массива. Затем добавляем этот объект в нашу модель listModel

Теперь мы можем скомпилировать и запустить нашу программу.