[SailfishDevel] Problem with Repeater and component

Asser Lähdemäki sailfishmail at denden.pw
Mon Mar 9 06:43:08 UTC 2015


> 
> Dear sailors,
> 
> I am relatively new to QML and I am trying to achieve  following 
> layout:
> 
> Label
> [ Image ]
> 
> Label
> [ Image ]
> 
> and I am trying to do it with Repeater and Component (I use Component / 
> Rectangle to aggrate two elements for repeater - not sure if this is 
> correct).
> 
> However, it shows only one last element - image, without label, on top 
> of the screen :/
> 
> Any help would be appreciated.
> 
> <code>
> import QtQuick 2.0
> import Sailfish.Silica 1.0
> 
> Page {
>      id: page
>      SilicaFlickable {
>          anchors.fill: parent
> 
>          PullDownMenu {
>              MenuItem {
>                  text: qsTr("Credits")
>                  onClicked: 
> pageStack.push(Qt.resolvedUrl("Credits.qml"))
>              }
>          }
> 
>          contentHeight: column.height
> 
>          Column {
>              id: column
>              width: page.width
>              spacing: Theme.paddingLarge
>              PageHeader {
>                  title: qsTr("Veggie Sailor")
>              }
> 
> 
>              Repeater {
>                  id: repeater
>                  width: page.width
>                  model: ListModel {
>                      ListElement {
>                          mytext: "Barcelona"
>                          image: "qrc:///static/images/barcelona.jpg"
>                      }
>                      ListElement {
>                          mytext: "Copenhagen"
>                          image: "qrc:///static/images/copenhagen.jpg"
>                      }
>                  }
>                  delegate: customblock
>              }
>              Component {
>                  id: customblock
>                  Rectangle {
>                      Label {
>                          text: qsTr(mytext)
>                          color: Theme.secondaryHighlightColor
>                          x: Theme.paddingLarge
> 
>                      }
>                      Image {
> 
>                          width: column.width
>                          height: 200
>                          fillMode: Image.PreserveAspectCrop
>                          source: image
>                      }
>                  }
>              }
>          }
>      }
> }
> </code>
> -- 
> Rafal bluszcz Zawadzki
> https://picup.it
> https://bluszcz.net
> https://jabberpl.org
> 
Hi,

you need to position the items inside your delegate as well, in your example code you could change the Rectangle to a Column for simple solution.

-Asser


More information about the Devel mailing list