Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

GridView and distance between delegates



  • Hi!
    My delegates vary in width. How do I set the distance between delegates?
    cellWidth doesn't suit me.



  • Post some working code :)



  • @Markkyboy said in GridView and distance between delegates:

    Post some working code :)

                    GridView {
                        id: gridViewSecondCategories
                        anchors.left: parent.left
                        anchors.leftMargin: labelNameRightMainInfoMain.anchors.leftMargin
                        anchors.right: parent.right
                        anchors.rightMargin: labelNameRightMainInfoMain.anchors.leftMargin
                        anchors.top: comboBoxSecondCategirtMainRightMainInfoMain.bottom
                        anchors.topMargin: textFieldNameRightMainInfoMain.anchors.topMargin
                        //width: 140
                        height: 90
                        //cellWidth: 50
                        cellHeight: 45
                        delegate: Item {
                            //x: 5
                            height: 30
                            width: labelDelegateGridViewSecondCategories.width + 40
                            Rectangle{
                                id: rectangleDelegateGridViewSecondCategories
                                height: parent.height
                                width: parent.width
                                color: "#c3bcbc"
                                radius: height / 2
                                Label{
                                    id: labelDelegateGridViewSecondCategories
                                    text: name
                                    font.pixelSize: 12
                                    anchors.verticalCenter: parent.verticalCenter
                                    anchors.left: parent.left
                                    anchors.leftMargin: 10
                                }
                                Button{
                                    id: buttonDelegateGridViewSecondCategories
                                    height: parent.height * 0.6
                                    width: height
                                    anchors.verticalCenter: parent.verticalCenter
                                    anchors.right: parent.right
                                    anchors.rightMargin: 10
                                    background: Rectangle{
                                        anchors.fill: parent
                                        color: "#00000000"
                                    }
    
                                    Image {
                                        source: "Images/cancel.png"
                                        anchors.fill: parent
                                    }
                                }
                            }
    
                        }
                        model: ListModel {
                            id: listModelGreedWiewSecondCategories
                            ListElement {
                                name: "Grey"
                                colorCode: "grey"
                            }
    
                            ListElement {
                                name: "Red"
                                colorCode: "red"
                            }
    
                            ListElement {
                                name: "Blue"
                                colorCode: "blue"
                            }
    
                            ListElement {
                                name: "Green"
                                colorCode: "green"
                            }
                        }
                    }
    


  • Really, 'spacing' id required here, but GridView doesn't support that. There is another question here on the forum; https://forum.qt.io/topic/19775/solved-qml-gridview-and-spacing-between-children/3 which suggests cellWidth, which you say doesn't suit you. In which case, can you not use Row instead of GridView?, all I see when your code is compiled, is 4 grey radiused buttons in a row.

    If you use Row, you can individually control the width between each button by nesting each button and then you can use 'spacing: ?' to whatever you like. This is demonstrated by me on this link; https://forum.qt.io/topic/112024/vary-spacing-in-qml-row

    Should I be seeing more than just four labelled buttons from your code?

    EDIT/
    or, as a cheat, pad out the names of the buttons. 'green' is the longest name (5 characters), so add a space into the appropriate words; e.g. add 2 spaces to the end of "Red " - your buttons are now of equal width that I can see and the spacing is even.



  • @Markkyboy This is incomplete code. Each delegate will have several words and they will be of different lengths. There may be many delegates, or there may be more than one row, so row will not work.



  • it is work

    import QtQuick 2.9
    import QtQuick.Window 2.2
     
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
     
        ListModel {
            id: textModel
            ListElement { text: "Hello"; }
            ListElement { text: "Hello, World!"; }
            ListElement { text: "Flow"; }
        }
     
        Flow {
            anchors.fill: parent
            anchors.margins: 4
            spacing: 10
     
            Repeater {
                model: textModel
                Rectangle {
                    width: t_metrics.tightBoundingRect.width + 20
                    height: t_metrics.tightBoundingRect.height + 10
                    color: "gray";
                    radius: 5;
                    Text {
                        id: currentText
                        anchors.centerIn: parent
                        text: model.text;
                    }
                    TextMetrics {
                        id:     t_metrics
                        font:   currentText.font
                        text:   currentText.text
                    }
                }
            }
        }
    }
    

Log in to reply