Михаиллл
Михаиллл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

                  Спасибо

                    Комментарии

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

                    C++ - Тест 004. Указатели, Массивы и Циклы

                    • Результат:50баллов,
                    • Очки рейтинга-4
                    m
                    • molni99
                    • 26 октября 2024 г. 8:37

                    C++ - Тест 004. Указатели, Массивы и Циклы

                    • Результат:80баллов,
                    • Очки рейтинга4
                    m
                    • molni99
                    • 26 октября 2024 г. 8:29

                    C++ - Тест 004. Указатели, Массивы и Циклы

                    • Результат:20баллов,
                    • Очки рейтинга-10
                    Последние комментарии
                    i
                    innorwall12 ноября 2024 г. 6:12
                    Django - Урок 055. Как написать функционал auto populate field Freckles because of several brand names retin a, atralin buy generic priligy
                    i
                    innorwall12 ноября 2024 г. 2:23
                    QML - Урок 035. Использование перечислений в QML без C++ priligy cvs 24 Together with antibiotics such as amphotericin B 10, griseofulvin 11 and streptomycin 12, chloramphenicol 9 is in the World Health Organisation s List of Essential Medici…
                    i
                    innorwall11 ноября 2024 г. 23:50
                    Qt/C++ - Урок 052. Кастомизация Qt Аудио плеера в стиле AIMP It decreases stress, supports hormone balance, and regulates and increases blood flow to the reproductive organs buy priligy online safe Promising data were reported in a PDX model re…
                    i
                    innorwall11 ноября 2024 г. 22:19
                    Алгоритм сортировки кучей The role of raloxifene in preventing breast cancer priligy precio
                    i
                    innorwall11 ноября 2024 г. 21:55
                    PyQt5 - Урок 006. Работа с QTableWidget buy priligy 60 mg 53 have been reported by Javanovic Santa et al
                    Сейчас обсуждают на форуме
                    i
                    innorwall12 ноября 2024 г. 4:56
                    добавить qlineseries в функции buy priligy senior brother Chu He, whom he had known for many years
                    i
                    innorwall11 ноября 2024 г. 18:55
                    Всё ещё разбираюсь с кешем. priligy walgreens levitra dulcolax carbs The third ring was found to be made up of ultra relativistic electrons, which are also present in both the outer and inner rings
                    9
                    9Anonim25 октября 2024 г. 16:10
                    Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…
                    ИМ
                    Игорь Максимов3 октября 2024 г. 11:05
                    Реализация навигации по разделам Спасибо Евгений!

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