Михаиллл
May 21, 2020, 2:06 p.m.

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

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

3

Do you like it? Share on social networks!

9
S
  • May 22, 2020, 3 a.m.
  • (edited)

Можно сделать через любой Layout , или через anchors . Тут уже как кому нравится.

Я накидал на скорую руку Row Layout , но якоря будут более адаптивней для мобильных платформ

  1. ApplicationWindow {
  2.  
  3. visible: true
  4. width: 1000
  5. height: 1000
  6.  
  7. RowLayout {
  8.  
  9. spacing: 10
  10. width: 1000
  11. height: 200
  12.  
  13. Repeater {
  14.  
  15. model: 10
  16.  
  17. Rectangle {
  18.  
  19. Layout.alignment: Qt.AlignCenter
  20. color: "Red"
  21. width: switch (index) {
  22.  
  23. case 0: 150
  24. break;
  25.  
  26. case 2: 300
  27. break;
  28.  
  29. default: 50
  30.  
  31. }
  32.  
  33. height: 50
  34. radius: 10
  35.  
  36. }
  37.  
  38. }
  39.  
  40. }
  41.  
  42. }
    Михаиллл
    • May 22, 2020, 3:31 a.m.

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

      S
      • May 22, 2020, 3:47 a.m.
      • (edited)

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

      anchors.left: parent
      anchors.leftMargin: int

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

        Михаиллл
        • May 22, 2020, 12:44 p.m.

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

          S
          • May 22, 2020, 1:12 p.m.
          • (edited)

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

            Evgenii Legotckoi
            • May 22, 2020, 1:16 p.m.
            • The answer was marked as a solution.

            Не ребят, только усложняете всё со своими Layout. Есть готовый компонент и называется он Flow

            Вот вам пример на быструю руку

            1. import QtQuick 2.9
            2. import QtQuick.Window 2.2
            3.  
            4. Window {
            5. visible: true
            6. width: 640
            7. height: 480
            8. title: qsTr("Hello World")
            9.  
            10. Flow {
            11. anchors.fill: parent
            12. anchors.margins: 4
            13. spacing: 10
            14.  
            15. Rectangle {
            16. width: t_metrics_1.tightBoundingRect.width + 20
            17. height: t_metrics_1.tightBoundingRect.height + 10
            18. color: "gray";
            19. radius: 5;
            20. Text {
            21. id: text_1
            22. anchors.centerIn: parent
            23. text: "Hello!";
            24. }
            25. TextMetrics {
            26. id: t_metrics_1
            27. font: text_1.font
            28. text: text_1.text
            29. }
            30. }
            31. Rectangle {
            32. width: t_metrics_2.tightBoundingRect.width + 20
            33. height: t_metrics_2.tightBoundingRect.height + 10
            34. color: "gray";
            35. radius: 5;
            36. Text {
            37. id: text_2
            38. anchors.centerIn: parent
            39. text: "Hello, World!";
            40. }
            41. TextMetrics {
            42. id: t_metrics_2
            43. font: text_2.font
            44. text: text_2.text
            45. }
            46. }
            47. Rectangle {
            48. width: t_metrics_3.tightBoundingRect.width + 20
            49. height: t_metrics_3.tightBoundingRect.height + 10
            50. color: "gray";
            51. radius: 5;
            52. Text {
            53. id: text_3
            54. anchors.centerIn: parent
            55. text: "Flow";
            56. }
            57. TextMetrics {
            58. id: t_metrics_3
            59. font: text_3.font
            60. text: text_3.text
            61. }
            62. }
            63. }
            64. }
            65.  
              Михаиллл
              • May 22, 2020, 5:36 p.m.

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

                Evgenii Legotckoi
                • May 22, 2020, 5:49 p.m.

                Repeater используйте

                1. import QtQuick 2.9
                2. import QtQuick.Window 2.2
                3.  
                4. Window {
                5. visible: true
                6. width: 640
                7. height: 480
                8. title: qsTr("Hello World")
                9.  
                10. ListModel {
                11. id: textModel
                12. ListElement { text: "Hello"; }
                13. ListElement { text: "Hello, World!"; }
                14. ListElement { text: "Flow"; }
                15. }
                16.  
                17. Flow {
                18. anchors.fill: parent
                19. anchors.margins: 4
                20. spacing: 10
                21.  
                22. Repeater {
                23. model: textModel
                24. Rectangle {
                25. width: t_metrics.tightBoundingRect.width + 20
                26. height: t_metrics.tightBoundingRect.height + 10
                27. color: "gray";
                28. radius: 5;
                29. Text {
                30. id: currentText
                31. anchors.centerIn: parent
                32. text: model.text;
                33. }
                34. TextMetrics {
                35. id: t_metrics
                36. font: currentText.font
                37. text: currentText.text
                38. }
                39. }
                40. }
                41. }
                42. }
                43.  
                  Михаиллл
                  • May 22, 2020, 8:55 p.m.

                  Спасибо

                    Comments

                    Only authorized users can post comments.
                    Please, Log in or Sign up
                    • Last comments
                    • AK
                      April 1, 2025, 11:41 a.m.
                      Добрый день. В данный момент работаю над проектом, где необходимо выводить звук из программы в определенное аудиоустройство (колонки, наушники, виртуальный кабель и т.д). Пишу на Qt5.12.12 поско…
                    • Evgenii Legotckoi
                      March 9, 2025, 9:02 p.m.
                      К сожалению, я этого подсказать не могу, поскольку у меня нет необходимости в обходе блокировок и т.д. Поэтому я и не задавался решением этой проблемы. Ну выглядит так, что вам действитель…
                    • VP
                      March 9, 2025, 4:14 p.m.
                      Здравствуйте! Я устанавливал Qt6 из исходников а также Qt Creator по отдельности. Все компоненты, связанные с разработкой для Android, установлены. Кроме одного... Когда пытаюсь скомпилиров…
                    • ИМ
                      Nov. 22, 2024, 9:51 p.m.
                      Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
                    • Evgenii Legotckoi
                      Oct. 31, 2024, 11:37 p.m.
                      Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup