GridView and distance between delegates

[Mikeeeeee]

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

[Markkyboy]

Post some working code :)

[Mikeeeeee]

@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"
                        }
                    }
                }

[Markkyboy]

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.

[Mikeeeeee]

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

[Mikeeeeee]

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