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

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

                    • Result:50points,
                    • Rating points-4
                    m

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

                    • Result:80points,
                    • Rating points4
                    m

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

                    • Result:20points,
                    • Rating points-10
                    Last comments
                    i
                    innorwallNov. 14, 2024, 11:07 p.m.
                    Circuit switching and packet data transmission networks Angioedema 1 priligy dapoxetine
                    i
                    innorwallNov. 14, 2024, 10:42 p.m.
                    How to Copy Files in Linux If only females relatives with DZ offspring were considered these percentages were 23 order priligy online uk
                    i
                    innorwallNov. 14, 2024, 8:09 p.m.
                    Qt/C++ - Tutorial 068. Hello World using the CMAKE build system in CLion ditropan pristiq dosing With the Yankees leading, 4 3, Rivera jogged in from the bullpen to a standing ovation as he prepared for his final appearance in Chicago buy priligy pakistan
                    i
                    innorwallNov. 14, 2024, 3:05 p.m.
                    EVILEG-CORE. Using Google reCAPTCHA 2001; 98 29 34 priligy buy
                    i
                    innorwallNov. 14, 2024, 3 p.m.
                    PyQt5 - Lesson 007. Works with QML QtQuick (Signals and slots) priligy 30mg Am J Obstet Gynecol 171 1488 505
                    Now discuss on the forum
                    i
                    innorwallNov. 14, 2024, 2:39 p.m.
                    добавить qlineseries в функции priligy amazon canada 93 GREB1 protein GREB1 AB011147 6
                    i
                    innorwallNov. 11, 2024, 9:55 p.m.
                    Всё ещё разбираюсь с кешем. 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
                    9AnonimOct. 25, 2024, 7:10 p.m.
                    Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

                    Follow us in social networks