Михаиллл
Михаиллл21. Mai 2020 04:06

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

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

Рекомендуємо хостинг TIMEWEB
Рекомендуємо хостинг TIMEWEB
Stabiles Hosting des sozialen Netzwerks EVILEG. Wir empfehlen VDS-Hosting für Django-Projekte.

Magst du es? In sozialen Netzwerken teilen!

9
S
  • 21. Mai 2020 17:00
  • (bearbeitet)

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

           }

       }

   }

}   
    Михаиллл
    • 21. Mai 2020 17:31

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

      S
      • 21. Mai 2020 17:47
      • (bearbeitet)

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

      anchors.left: parent
      anchors.leftMargin: int

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

        Михаиллл
        • 22. Mai 2020 02:44

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

          S
          • 22. Mai 2020 03:12
          • (bearbeitet)

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

            Evgenii Legotckoi
            • 22. Mai 2020 03:16
            • Die Antwort wurde als Lösung markiert.

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

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

                Evgenii Legotckoi
                • 22. Mai 2020 07:49

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

                  Спасибо

                    Kommentare

                    Nur autorisierte Benutzer können Kommentare posten.
                    Bitte Anmelden oder Registrieren
                    Letzte Kommentare
                    ИМ
                    Игорь Максимов5. Oktober 2024 07:51
                    Django – Lektion 064. So schreiben Sie eine Python-Markdown-Erweiterung Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
                    d
                    dblas55. Juli 2024 11:02
                    QML - Lektion 016. SQLite-Datenbank und das Arbeiten damit in QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
                    k
                    kmssr8. Februar 2024 18:43
                    Qt Linux - Lektion 001. Autorun Qt-Anwendung unter Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                    Qt WinAPI - Lektion 007. Arbeiten mit ICMP-Ping in Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                    EVA
                    EVA25. Dezember 2023 10:30
                    Boost - statisches Verknüpfen im CMake-Projekt unter Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
                    Jetzt im Forum diskutieren
                    J
                    JacobFib17. Oktober 2024 03:27
                    добавить qlineseries в функции Пользователь может получить любые разъяснения по интересующим вопросам, касающимся обработки его персональных данных, обратившись к Оператору с помощью электронной почты https://topdecorpro.ru…
                    JW
                    Jhon Wick1. Oktober 2024 15:52
                    Indian Food Restaurant In Columbus OH| Layla’s Kitchen Indian Restaurant If you're looking for a truly authentic https://www.laylaskitchenrestaurantohio.com/ , Layla’s Kitchen Indian Restaurant is your go-to destination. Located at 6152 Cleveland Ave, Colu…
                    КГ
                    Кирилл Гусарев27. September 2024 09:09
                    Не запускается программа на Qt: точка входа в процедуру не найдена в библиотеке DLL Написал программу на C++ Qt в Qt Creator, сбилдил Release с помощью MinGW 64-bit, бинарнику напихал dll-ки с помощью windeployqt.exe. При попытке запуска моей сбилженной программы выдаёт три оши…
                    F
                    Fynjy22. Juli 2024 04:15
                    при создании qml проекта Kits есть но недоступны для выбора Поставил Qt Creator 11.0.2. Qt 6.4.3 При создании проекта Qml не могу выбрать Kits, они все недоступны, хотя настроены и при создании обычного Qt Widget приложения их можно выбрать. В чем может …

                    Folgen Sie uns in sozialen Netzwerken