Михаиллл
МихаилллMay 21, 2020, 4:06 a.m.

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

Добрый день.
Нужно сделать похожий эллемент. Думал использовать GridView , но там можно задавать только cellWidth статичную ширину добаления делегатов. Есть ли еще что то похожее в QML, позволяющее это реализовать?

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Do you like it? Share on social networks!

9
S
  • May 21, 2020, 5 p.m.
  • (edited)

Можно сделать через любой 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

           }

       }

   }

}   
    Михаиллл
    • May 21, 2020, 5:31 p.m.

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

      S
      • May 21, 2020, 5:47 p.m.
      • (edited)

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

      anchors.left: parent
      anchors.leftMargin: int

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

        Михаиллл
        • May 22, 2020, 2:44 a.m.

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

          S
          • May 22, 2020, 3:12 a.m.
          • (edited)

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

            Evgenii Legotckoi
            • May 22, 2020, 3:16 a.m.
            • The answer was marked as a solution.

            Не ребят, только усложняете всё со своими 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
                        }
                    }
                }
            }
            
            
              Михаиллл
              • May 22, 2020, 7:36 a.m.

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

                Evgenii Legotckoi
                • May 22, 2020, 7:49 a.m.

                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
                                }
                            }
                        }
                    }
                }
                
                
                  Михаиллл
                  • May 22, 2020, 10:55 a.m.

                  Спасибо

                    Comments

                    Only authorized users can post comments.
                    Please, Log in or Sign up
                    B

                    C++ - Test 002. Constants

                    • Result:16points,
                    • Rating points-10
                    B

                    C++ - Test 001. The first program and data types

                    • Result:46points,
                    • Rating points-6
                    FL

                    C++ - Test 006. Enumerations

                    • Result:80points,
                    • Rating points4
                    Last comments
                    k
                    kmssrFeb. 9, 2024, 5:43 a.m.
                    Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                    Qt WinAPI - Lesson 007. Working with ICMP Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                    EVA
                    EVADec. 25, 2023, 9:30 p.m.
                    Boost - static linking in CMake project under Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
                    J
                    JonnyJoDec. 25, 2023, 7:38 p.m.
                    Boost - static linking in CMake project under Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
                    G
                    GvozdikDec. 19, 2023, 8:01 a.m.
                    Qt/C++ - Lesson 056. Connecting the Boost library in Qt for MinGW and MSVC compilers Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
                    Now discuss on the forum
                    AC
                    Alexandru CodreanuJan. 19, 2024, 10:57 p.m.
                    QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…
                    BlinCT
                    BlinCTDec. 27, 2023, 7:57 p.m.
                    Растягивать Image на парент по высоте Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так Flickable{ id: root anchors.fill: parent clip: true property url linkFile p…
                    Дмитрий
                    ДмитрийJan. 10, 2024, 3:18 p.m.
                    Qt Creator загружает всю оперативную память Проблема решена. Удалось разобраться с помощью утилиты strace. Запустил ее: strace ./qtcreator Начал выводиться весь лог работы креатора. В один момент он начал считывать фай…
                    Evgenii Legotckoi
                    Evgenii LegotckoiDec. 12, 2023, 5:48 p.m.
                    Побуквенное сравнение двух строк Добрый день. Там случайно не высылается этот сигнал textChanged ещё и при форматировани текста? Если решиать в лоб, то можно просто отключать сигнал/слотовое соединение внутри слота и …

                    Follow us in social networks