Михаиллл
Михаиллл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
                    d
                    • dsfs
                    • April 26, 2024, 2:56 p.m.

                    C ++ - Test 004. Pointers, Arrays and Loops

                    • Result:80points,
                    • Rating points4
                    d
                    • dsfs
                    • April 26, 2024, 2:45 p.m.

                    C++ - Test 002. Constants

                    • Result:50points,
                    • Rating points-4
                    d
                    • dsfs
                    • April 26, 2024, 2:35 p.m.

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

                    • Result:73points,
                    • Rating points1
                    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
                    IscanderChe
                    IscanderCheApril 30, 2024, 2:22 p.m.
                    Во Flask рендер шаблона не передаётся в браузер Доброе утро! Имеется вот такой шаблон: <!doctype html><html> <head> <title>{{ title }}</title> <link rel="stylesheet" href="{{ url_…
                    G
                    GarApril 22, 2024, 3:46 p.m.
                    Clipboard Как скопировать окно целиком в clipb?
                    DA
                    Dr Gangil AcademicsApril 20, 2024, 5:45 p.m.
                    Unlock Your Aesthetic Potential: Explore MSC in Facial Aesthetics and Cosmetology in India Embark on a transformative journey with an msc in facial aesthetics and cosmetology in india . Delve into the intricate world of beauty and rejuvenation, guided by expert faculty and …
                    a
                    a_vlasovApril 14, 2024, 4:41 p.m.
                    Мобильное приложение на C++Qt и бэкенд к нему на Django Rest Framework Евгений, добрый день! Такой вопрос. Верно ли следующее утверждение: Любое Android-приложение, написанное на Java/Kotlin чисто теоретически (пусть и с большими трудностями) можно написать и на C+…
                    Павел Дорофеев
                    Павел ДорофеевApril 14, 2024, 12:35 p.m.
                    QTableWidget с 2 заголовками Вот тут есть кастомный QTableView с многорядностью проект поддерживается, обращайтесь

                    Follow us in social networks