Михаиллл
Михаиллл21 мая 2020 г. 4:06

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

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

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Вам это нравится? Поделитесь в социальных сетях!

9
S
  • 21 мая 2020 г. 17:00
  • (ред.)

Можно сделать через любой 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 мая 2020 г. 17:31

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

      S
      • 21 мая 2020 г. 17:47
      • (ред.)

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

      anchors.left: parent
      anchors.leftMargin: int

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

        Михаиллл
        • 22 мая 2020 г. 2:44

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

          S
          • 22 мая 2020 г. 3:12
          • (ред.)

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

            Evgenii Legotckoi
            • 22 мая 2020 г. 3:16
            • Ответ был помечен как решение.

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

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

                Evgenii Legotckoi
                • 22 мая 2020 г. 7: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 мая 2020 г. 10:55

                  Спасибо

                    Комментарии

                    Только авторизованные пользователи могут публиковать комментарии.
                    Пожалуйста, авторизуйтесь или зарегистрируйтесь
                    B

                    C++ - Тест 002. Константы

                    • Результат:16баллов,
                    • Очки рейтинга-10
                    B

                    C++ - Тест 001. Первая программа и типы данных

                    • Результат:46баллов,
                    • Очки рейтинга-6
                    FL

                    C++ - Тест 006. Перечисления

                    • Результат:80баллов,
                    • Очки рейтинга4
                    Последние комментарии
                    k
                    kmssr9 февраля 2024 г. 5:43
                    Qt Linux - Урок 001. Автозапуск Qt приложения под Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                    АК
                    Анатолий Кононенко5 февраля 2024 г. 12:50
                    Qt WinAPI - Урок 007. Работаем с ICMP Ping в Qt Без строки #include <QRegularExpressionValidator> в заголовочном файле не работает валидатор.
                    EVA
                    EVA25 декабря 2023 г. 21:30
                    Boost - статическая линковка в CMake проекте под Windows Ошибка LNK1104 часто возникает, когда компоновщик не может найти или открыть файл библиотеки. В вашем случае, это файл libboost_locale-vc142-mt-gd-x64-1_74.lib из библиотеки Boost для C+…
                    J
                    JonnyJo25 декабря 2023 г. 19:38
                    Boost - статическая линковка в CMake проекте под Windows Сделал всё по-как у вас, но выдаёт ошибку [build] LINK : fatal error LNK1104: не удается открыть файл "libboost_locale-vc142-mt-gd-x64-1_74.lib" Хоть убей, не могу понять в чём дел…
                    G
                    Gvozdik19 декабря 2023 г. 8:01
                    Qt/C++ - Урок 056. Подключение библиотеки Boost в Qt для компиляторов MinGW и MSVC Для решения твой проблемы добавь в файл .pro строчку "LIBS += -lws2_32" она решит проблему , лично мне помогло.
                    Сейчас обсуждают на форуме
                    P
                    Pisych27 февраля 2023 г. 15:04
                    Как получить в массив значения из связанной модели? Спасибо, разобрался:))
                    AC
                    Alexandru Codreanu19 января 2024 г. 22:57
                    QML Обнулить значения SpinBox Доброго времени суток, не могу разобраться с обнулением значение SpinBox находящего в делегате. import QtQuickimport QtQuick.ControlsWindow { width: 640 height: 480 visible: tr…
                    BlinCT
                    BlinCT27 декабря 2023 г. 19:57
                    Растягивать Image на парент по высоте Ну и само собою дял включения scrollbar надо чтобы был Flickable. Так что выходит как то так Flickable{ id: root anchors.fill: parent clip: true property url linkFile p…
                    Дмитрий
                    Дмитрий10 января 2024 г. 15:18
                    Qt Creator загружает всю оперативную память Проблема решена. Удалось разобраться с помощью утилиты strace. Запустил ее: strace ./qtcreator Начал выводиться весь лог работы креатора. В один момент он начал считывать фай…
                    Evgenii Legotckoi
                    Evgenii Legotckoi12 декабря 2023 г. 17:48
                    Побуквенное сравнение двух строк Добрый день. Там случайно не высылается этот сигнал textChanged ещё и при форматировани текста? Если решиать в лоб, то можно просто отключать сигнал/слотовое соединение внутри слота и …

                    Следите за нами в социальных сетях