Transparency of Flickable (and Border Merge)



  • 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' :(

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



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



  • 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
                }
            }
        }
    }
    

    }
    @



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



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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.