[SOLVED] QML: GridView and spacing between children



  • How to set the spacing between the children of gridview in QML?
    @
    // import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
    import QtQuick 1.0

    Rectangle
    {
    signal selected(string sezione) //[PATHiMMAGINI]/Deutschland <-> [PATHiMMAGINI]/Italia

    property int lunghezza: 600
    property int altezza: 400
    
    color: "transparent"
    width: lunghezza - 60
    height: altezza - 30
    GridView
    {
        anchors.fill: parent
        highlight: Rectangle { radius: 5; color: "lightsteelblue" }
        model: modelSezioni
        delegate:
            Flipable {
            property bool flipped: false
    
            id: flipableCard
            width: 105
            height: 70
    
            front: Image { source: bandiera1; id: img1; anchors.centerIn: parent }
            back: Image { id: img2; source: bandiera2; anchors.centerIn: parent }
    
            transform: Rotation {
                id: rotation
                angle: 0
                origin.x: flipableCard.width / 2
                origin.y: flipableCard.height / 2
                axis.x: 1 //questo flipable girerĂ  sull'asse x, in verticale
                axis.z: 0
                axis.y: 0
            }
    
            Timer
            {
                interval: intervalloDiRotazione
                repeat: true
                running: true
                onTriggered: { flipableCard.flipped = !flipableCard.flipped; }
            }
    
            states: State {
                name: "back"
                when: flipableCard.flipped
                PropertyChanges { target: rotation; angle: 180 }
            }
    
            transitions: Transition {
                NumberAnimation { target: rotation; property: "angle"; duration: 1500 }
            }
    
            MouseArea {
                anchors.fill: parent
                onClicked: { selected(bandiera1 + " <-> " + bandiera2); }
            }
        }
    }
    

    }
    @



  • afaik, gridview dose not have 'spacing' properties.
    but i think you can effectively set a spacing by using cellWidth, cellHeight property, delegate's width/height
    like,,,

    @
    GridView {
    ...
    cellHeight: 110
    cellWidth:110

    delegate : Item {
    x:10
    y: 10
    width: 100
    height: 100
    ....
    }
    }
    @

    or how about using delegates as nested Item
    like..

    @
    GridView {
    ......
    delegate : Item {
    width:110
    height: 110

       Item {
            width: 100
            height: 100
            anchors.centerIn:parent
            ...
        }
    

    }
    @



  • Thank you
    this is enough for that:
    @
    GridView
    {
    cellWidth:100
    cellHeight:100
    ...
    }
    @


Log in to reply
 

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