QML, spacing in GridView или что то похожее

Рекомендуємо хостинг TIMEWEB

Стабільний хостинг, на якому розміщується соціальна мережа EVILEG. Для проектів на Django радимо VDS хостинг.

Можно сделать через любой Layout , или через anchors . Тут уже как кому нравится.

Я накидал на скорую руку Row Layout , но якоря будут более адаптивней для мобильных платформ

ApplicationWindow {

    visible: true
    width: 1000
    height: 1000

   RowLayout {

       spacing: 10
       width: 1000
       height: 200

       Repeater {

           model: 10

           Rectangle {

               Layout.alignment: Qt.AlignCenter
               color: "Red"
               width: switch (index) {

                      case 0: 150
                          break;

                      case 2: 300
                          break;

                      default: 50

                      }

               height: 50
               radius: 10

           }

       }

   }

}   

Но у меня может быть больше чем одна строка. Можно ли как то сделать многострочный вариант?

Да, можешь запихнуть в ColumnLayout
или же через якори наверстать несколько элементов:

anchors.left: parent
anchors.leftMargin: int

Я бы накидал код, но я уже спать хочу)

А разве если добавлять строки в ColumnLayout, то они при недостатке ширины будут пускаться и в следующую строку?

Да, если указывать minimumWidth/Height

Не ребят, только усложняете всё со своими Layout. Есть готовый компонент и называется он Flow

Вот вам пример на быструю руку

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Flow {
        anchors.fill: parent
        anchors.margins: 4
        spacing: 10

        Rectangle {
            width: t_metrics_1.tightBoundingRect.width + 20
            height: t_metrics_1.tightBoundingRect.height + 10
            color: "gray";
            radius: 5;
            Text {
                id: text_1
                anchors.centerIn: parent
                text: "Hello!";
            }
            TextMetrics {
                id:     t_metrics_1
                font:   text_1.font
                text:   text_1.text
            }
        }
        Rectangle {
            width: t_metrics_2.tightBoundingRect.width + 20
            height: t_metrics_2.tightBoundingRect.height + 10
            color: "gray";
            radius: 5;
            Text {
                id: text_2
                anchors.centerIn: parent
                text: "Hello, World!";
            }
            TextMetrics {
                id:     t_metrics_2
                font:   text_2.font
                text:   text_2.text
            }
        }
        Rectangle {
            width: t_metrics_3.tightBoundingRect.width + 20
            height: t_metrics_3.tightBoundingRect.height + 10
            color: "gray";
            radius: 5;
            Text {
                id: text_3
                anchors.centerIn: parent
                text: "Flow";
            }
            TextMetrics {
                id:     t_metrics_3
                font:   text_3.font
                text:   text_3.text
            }
        }
    }
}

Но к Flow нельзя подключить модель. А как к нему можно динамично добавлять и удалять эллементы?

Repeater используйте

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

Спасибо