Transparency of Flickable (and Border Merge)

[A Former User]

Sorry guys if my issue have been discussed before but honestly I did not find any direct reference to my case.

1. My problem is that I do not see how to put any nice background (png or QML Gradient) under Flickable (or its descendant).

This is my simplified qml-view:
@Rectangle {
id: myScene
anchors.fill: parent

gradient: Gradient {
    GradientStop { position: 0.0; color: "#E9E9E9" }
    GradientStop { position: 1; color: "#AAA" }
}

<here goes some toolbar; height: 55>

Rectangle {
id: mainScreen
width: parent.width
height: parent.height - 55

    ListModel {id: friendsModel...}

    Item {
        id: listItemWrapper
        width: parent.width; height:40
        Component {
            id: myDelegate
            Item {
                id: wrapper
                width: friends.width; height: 39
                Column {
                    Item{
                        Text {
                            text: "First/last name: "+firstName+" "+lastName
                            font { family: "Times"; pixelSize: 20; }
                            id:name
                        }
                        Text {
                            text: "Email: "+email
                            font { family: "Times"; pixelSize: 16; }
                            anchors.top: name.bottom
                            anchors.topMargin:-2
                        }
                    }
                }
        ListView {
        id: friends
        anchors {fill: parent; leftMargin:40; rightMargin: 40; topMargin: 5; bottomMargin: 5}
        model: friendsModel
        delegate: myDelegate
        highlight: Rectangle {
            width: friends.currentItem.width
            color: "lightsteelblue"
            radius: 5
        }
        focus: true
        MouseArea {
            anchors.fill: parent
            onClicked: {
                friends.currentIndex = friends.indexAt(mouseX, mouseY)
            }
        }
        clip: true
        flickDeceleration: 1000
        //boundsBehavior: Flickable.DragOverBounds
    }
}@

BUT ... I do not see gradient. Just a a plain white rectangle filling 'mainScreen' :(

2. Another minor issue I would like to ask your advice:
   is it possible to merge borders of the adjacent item inside Column/Row when spacing:0

Thank you in advance

[A Former User]

Wild guess, try color: "transparent" on the mainscreen rectangle.

[baysmith]

Try this. Although the transparent color setting also works, I changed the mainScreen Rectangle to an Item instead, which also works. I also had to reparent the friends ListView to the listItemWrapper rather than inside the myDelegate Item.

@
import QtQuick 1.0

Item {
width: 300
height: 300

Rectangle {
    id: myScene
    anchors.fill: parent

    gradient: Gradient {
        GradientStop { position: 0.0; color: "#E9E9E9" }
        GradientStop { position: 1; color: "#AAA" }
    }


    Item {
        id: mainScreen
        width: parent.width
        height: parent.height - 55

        ListModel {
            id: friendsModel
            ListElement {
                firstName: "First"
                lastName: "Friend"
                email: "first@friend"
            }
            ListElement {
                firstName: "Second"
                lastName: "Friend"
                email: "second@friend"
            }
            ListElement {
                firstName: "Third"
                lastName: "Friend"
                email: "third@friend"
            }
        }

        Item {
            id: listItemWrapper
            width: parent.width; height:40
            anchors.fill: parent
            Component {
                id: myDelegate
                Item {
                    id: wrapper
                    width: friends.width; height: 39
                    Column {
                        Item{
                            Text {
                                text: "First/last name: "+firstName+" "+lastName
                                font { family: "Times"; pixelSize: 20; }
                                id:name
                            }
                            Text {
                                text: "Email: "+email
                                font { family: "Times"; pixelSize: 16; }
                                anchors.top: name.bottom
                                anchors.topMargin:-2
                            }
                        }
                    }
                }
            }
            ListView {
                id: friends
                anchors {
                    fill: parent;
                    leftMargin: 40;
                    rightMargin: 40;
                    topMargin: 5;
                    bottomMargin: 5
                }
                model: friendsModel
                delegate: myDelegate
                highlight: Rectangle {
                    width: friends.currentItem.width
                    color: "lightsteelblue"
                    radius: 5
                }
                focus: true
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        friends.currentIndex = friends.indexAt(mouseX, mouseY)
                    }
                }
                clip: true
                flickDeceleration: 1000
                //boundsBehavior: Flickable.DragOverBounds
            }
        }
    }
}

}
@

[mbrasser]

[quote author="hyperborean72" date="1292255031"]2. Another minor issue I would like to ask your advice:
is it possible to merge borders of the adjacent item inside Column/Row when spacing:0
[/quote]

The borders should overlap by default; for example, the following should only show a 1px border between the Rectangles.

@
import QtQuick 1.0

Rectangle {
width: 400; height: 400
Column {
spacing: 0
Repeater {
model: 6
delegate: Rectangle {
width: 50; height: 50
border.width: 1
}
}
}
}
@

You could also try setting a negative number for spacing to see if that helps in your particular case.

Regards,
Michael

[A Former User]

Thank you very much Michael, Mario and Bradley for your help.

Those issues are fixed.
Negative value for spacing worked.

Sorry, Bradley, for having missed closing brace.