[SailfishDevel] Spacing issues

Andrey Kozhevnikov coderusinbox at gmail.com
Tue May 20 14:06:52 UTC 2014


BackgroundItem {
id: delegate

width: parent.width
height: Theme.itemSizeSmall

Row {
id: row
x: Theme.paddingLarge
anchors.verticalCenter: parent.verticalCenter
spacing: Theme.paddingMedium
onClicked: {
//do something
}
Image {
fillMode: Image.PreserveAspectCrop
source: model.drunk_y_n? "../images/empty_glass.png" : 
"../images/full_glass.png"
}
Label {
anchors.verticalCenter: parent.verticalCenter
color: parent.highlighted ? Theme.highlightColor : Theme.primaryColor
text: model.beerName
}
}
}


20.05.2014 20:00, Chris Walker пишет:
> Hello,
>
> I have a list of items which display fine from a model. But I want to
> display an image before the text is displayed. The image is of a beer
> glass and the text items are beer names. But the beer names are overwriting
> the images. So where am I going wrong please?
>
> Here are the relevant bits of the code :-
>
> delegate: BackgroundItem {
>              id: delegate
>
>              ListItem {
>                  id: listItem
>                  property bool drunk_y_n: model.drunk_y_n
>                  Image {
>                      width: 40
>                      height: listItem.height - 4
>
>                      anchors {
>                          left: parent.left
>                          // this margin refers to the image, not the text in the ListElement
>                          leftMargin: 4
>                          verticalCenter: parent.verticalCenter
>                      }
>                      source: drunk_y_n? "../images/empty_glass.png" :
>                      "../images/full_glass.png" }
>              }
>
>              Label {
>              anchors.leftMargin: 45
>              anchors.verticalCenter: parent.verticalCenter
>              width: parent.width - Theme.paddingLarge
>              // x: Theme.paddingLarge
>              wrapMode: Text.Wrap
>              // elide: Text.ElideRight
>              font.pixelSize: Theme.fontSizeMedium
>              // style: Text.Raised
>              text: model.beerName
>              color: delegate.highlighted ? Theme.highlightColor :
>              Theme.primaryColor }
>              onClicked: console.log("Clicked " + index)
>              // amend this to call BeerDetailsPage.qml
>          }
>          VerticalScrollDecorator {}
>
> I should add that at some point, I will also want to add some text to
> display the ABV of the beers. I'm considering displaying the beer name,
> then the ABV and then the image. So should I be thinking of specifying
> columns for these? If so, how can I specify the widths of the columns
> such that the beer names will fade (elide?) under the ABV?
>
> Any help appreciated.
> _______________________________________________
> SailfishOS.org Devel mailing list
> To unsubscribe, please send a mail to devel-unsubscribe at lists.sailfishos.org



More information about the Devel mailing list