[SailfishDevel] Spacing issues

[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.