BlinCT
Jan. 22, 2021, 7:12 p.m.

Правильное расположение элементов в ListView

Всем привет.
Столкнулся с такой задачкой, имеется модель с данными.

  1. ListView
  2. {
  3. id: tableView
  4.  
  5. anchors.top: rowHeader.bottom
  6. anchors.left: parent.left
  7. anchors.right: parent.right
  8. anchors.bottom: parent.bottom
  9.  
  10. flickableDirection: TableView.VerticalFlick
  11.  
  12. clip: true
  13. model: root.model
  14.  
  15. delegate: Rectangle
  16. {
  17. id: rect
  18. clip: true
  19.  
  20. implicitWidth: 543
  21. implicitHeight: 22
  22. border.width: 1
  23. color: "red"
  24.  
  25. Repeater
  26. {
  27. id: celsRepeater
  28.  
  29. model: root.model.columnCount()
  30.  
  31. Rectangle
  32. {
  33. id: rextText
  34.  
  35. border.color: "blue"
  36. width: root.model.getSizeLongString(index)
  37. height: 15
  38.  
  39. Text
  40. {
  41. width: 50
  42.  
  43. height: 35
  44.  
  45. anchors.fill: parent
  46.  
  47. text: root.model.display
  48. }
  49. }
  50. }
  51. }

Метод columnCount() это invocable из С++ части передающий нужное колличество столбцов(то что должно в репиторе дать понять о колличестве элементов).
Но у меня создается такой трешь

В данной модели у меня 2 столбца, а поулчается вот что...
И еще такая ошибка "Unable to assign [undefined] to QString"
Заранее благодарю)

2

Do you like it? Share on social networks!

19
Алексей Внуков
  • Jan. 22, 2021, 7:39 p.m.
  • (edited)

добрый, а можно минимальный проект для эксперемента? еслитам что-то важное - можете в личку

    BlinCT
    • Jan. 22, 2021, 8:09 p.m.

    Вот так должно быглядеть в конечном итоге.

    Как видите тут строка в которой есть 2 колонки с данными.

      BlinCT
      • Jan. 22, 2021, 8:10 p.m.

      Минимальный не получится, потому что данные формируются из драйвера диска, потом там формируются обьекты, кидается все в модель)
      Кароче это просто так не вытащить)

        Алексей Внуков
        • Jan. 22, 2021, 8:14 p.m.
        • (edited)

        смысл я понял по коду, просто нет сейчас времени писать тест, чтоб поковырять где что не так, возможно у вас косяк в самой модели. поэтому и говорю что мнимальный код запустить посмотреть. мне нужна только модель c парой строк данных, qml c листом и их связка

          BlinCT
          • Jan. 22, 2021, 8:17 p.m.

          Я могу скинуть код самой модели, но она без данных будет

            Алексей Внуков
            • Jan. 22, 2021, 8:18 p.m.

            давайте так, я чет придумаю

              Алексей Внуков
              • Jan. 22, 2021, 8:22 p.m.
              • (edited)

              я так понимаю. принцип такой, нужные данные помещаются в обьект класса, потом все обьекты класса помещаются в модель, которая уже после выводится в qml list?
              у меня есть проект где таким образом данные выводятся в лист только в виде тасков для менеджера. тогда только нужно настроить корректное отображение, а так будет +- код похожий, могу скинуть если интересно

                BlinCT
                • Jan. 22, 2021, 8:25 p.m.

                Ну давайте если можете, мне главное qml файлик. Мне кажется что я тут в обработке что то не то делаю. Или что то не доделал.

                  Алексей Внуков
                  • Jan. 22, 2021, 8:26 p.m.
                  • (edited)

                  я бы поставил что скорее всего проблема qml вместе с моделью

                    Алексей Внуков
                    • Jan. 22, 2021, 9:13 p.m.
                    • (edited)

                    если чисто qml:

                    1. import QtQuick 2.0
                    2. import QtQuick.Controls 2.12
                    3. import QtQuick.Window 2.13
                    4. import QtGraphicalEffects 1.15
                    5.  
                    6. Window{
                    7. width: 640
                    8. height: 480
                    9. visible: true
                    10.  
                    11.  
                    12. Rectangle
                    13. {
                    14. id: rectangle
                    15. anchors.fill: parent
                    16. color: "#F0F2F5"
                    17. Flickable
                    18. {
                    19. clip: true
                    20. anchors.fill: parent
                    21. contentWidth: 1356
                    22.  
                    23. ScrollBar.vertical: ScrollBar
                    24. {
                    25. width:5
                    26. }
                    27. ScrollBar.horizontal: ScrollBar
                    28. {
                    29. width:5
                    30. }
                    31.  
                    32. property int c1: 0
                    33. property int c2: 0
                    34. property int c3: 0
                    35. property int c4: 0
                    36.  
                    37. Component.onCompleted:
                    38. {
                    39.  
                    40. red_model.append({color_l:"#E91E63", img_h: 1,head:"some text", head_b:"some text",l_body:"some text",img_c:"#F54E67", l_date:"01 июля", l_stage: "some text",h_col:"#F54E67"})
                    41. red_model.append({color_l:"#9C27B0", img_h: 0,head:"some text", head_b:"some text",l_body:"some text",img_c:"#F54E67", l_date:"01 июля", l_stage: "some text",h_col:"#F54E67"})
                    42. }
                    43.  
                    44. Rectangle
                    45. {
                    46. id:rec1
                    47. radius: 3
                    48. height: 50
                    49. anchors.left: parent.left
                    50. anchors.leftMargin: 28
                    51. anchors.top: parent.top
                    52. anchors.topMargin: 27
                    53. width: 310
                    54. clip: true
                    55.  
                    56. layer.enabled: true
                    57. layer.effect: OpacityMask {
                    58. maskSource: Item {
                    59. width: rec1.width
                    60. height: rec1.height
                    61. Rectangle {
                    62. anchors.centerIn: parent
                    63. width: rec1.width
                    64. height:rec1.height
                    65. radius: 3
                    66. }
                    67. }
                    68. }
                    69.  
                    70. Rectangle
                    71. {
                    72. id:r1
                    73. anchors.top: parent.top
                    74. anchors.left: parent.left
                    75. anchors.right: parent.right
                    76. color: "#F54E67"
                    77. height: 3
                    78. }
                    79.  
                    80. Label
                    81. {
                    82. id:lbl_col1
                    83. anchors.top: r1.bottom
                    84. anchors.topMargin: 7
                    85. anchors.left: parent.left
                    86. anchors.leftMargin: 15
                    87. text: "вид"
                    88. font.pixelSize: 14
                    89. }
                    90.  
                    91. Label
                    92. {
                    93. anchors.top: lbl_col1.bottom
                    94. anchors.topMargin: 3
                    95. anchors.left: parent.left
                    96. anchors.leftMargin: 15
                    97. text:"Элементов: " + red_model.count
                    98. }
                    99. }
                    100.  
                    101. Rectangle {
                    102. anchors.top: rec1.bottom
                    103. anchors.topMargin: 10
                    104. anchors.horizontalCenter: rec1.horizontalCenter
                    105. width: 23
                    106. height: 3
                    107. color: "#F0F2F5"
                    108. Row
                    109. {
                    110. spacing: 7
                    111. Rectangle
                    112. {
                    113. color: "#CBD0D6"
                    114. height: 3
                    115. width: 3
                    116. }
                    117. Rectangle
                    118. {
                    119. color: "#CBD0D6"
                    120. height: 3
                    121. width: 3
                    122. }
                    123. Rectangle
                    124. {
                    125. color: "#CBD0D6"
                    126. height: 3
                    127. width: 3
                    128. }
                    129. }
                    130. }
                    131.  
                    132. ListModel
                    133. {
                    134. id:red_model
                    135. }
                    136.  
                    137. ListView
                    138. {
                    139. id:red_list
                    140. anchors.left: rec1.left
                    141. anchors.right: rec1.right
                    142. anchors.top: rec1.bottom
                    143. anchors.topMargin: 20
                    144. anchors.bottom: parent.bottom
                    145. clip: true
                    146. model: red_model
                    147. spacing:10
                    148. delegate: Task
                    149. {
                    150. id:task
                    151. wid: rec1.width
                    152. img_header_color:h_col
                    153. imgc_lock:img_c
                    154. lbl_color:color_l
                    155. lbl_head: head
                    156. head_body: head_b
                    157. lbl_body: l_body
                    158. lbl_date: l_date
                    159. img_header: img_h
                    160. lbl_stage: l_stage
                    161. }
                    162. }
                    163. }
                    164. }
                    165. }
                    166.  

                    а сам делегат у меня в отдельном файле Task.qml

                    1. import QtQuick 2.0
                    2. import QtQuick.Controls 2.12
                    3.  
                    4. Rectangle {
                    5.  
                    6. id: rectangle
                    7. width: wid
                    8. height: img_h.y+lbl_d.y+13+ lbl.contentHeight
                    9. property int wid:310
                    10. property string lbl_color: ""
                    11. property int img_header: 0
                    12. property string img_header_color: "black"//цвет заглавия
                    13. property string lbl_date: ""
                    14. property string lbl_body: ""
                    15. property string lbl_head: ""
                    16. property string imgc_lock: "black"//цвет часов
                    17. property string lbl_stage: ""
                    18. property string head_body: ""
                    19. //property int test: 0
                    20.  
                    21. function onChar(i)
                    22. {
                    23. return "@"
                    24. }
                    25.  
                    26. color: "#FFFFFF"
                    27.  
                    28. Label {
                    29. id: img_h
                    30. width: 16
                    31. height: 16
                    32. anchors.left: parent.left
                    33. anchors.top:parent.top
                    34. anchors.leftMargin: 10
                    35. anchors.topMargin: 11.33
                    36. font.pixelSize: 16
                    37. color: img_header_color
                    38. text:onChar(img_header)//img_header
                    39.  
                    40. }
                    41.  
                    42.  
                    43. Label
                    44. {
                    45. id:lbl_h
                    46. text:"<font color=\"#000000\">"+lbl_head+"</font>"+" "+"<font color=\"#607D8B\">"+head_body+"</font>"
                    47. anchors.left: img_h.right
                    48. anchors.top:parent.top
                    49. anchors.leftMargin: 10
                    50. anchors.topMargin: 10
                    51. anchors.right: parent.right
                    52. anchors.rightMargin: 10
                    53. font.pixelSize: 13
                    54. wrapMode: Text.WordWrap
                    55. verticalAlignment: Text.AlignVCenter
                    56. color: "#26292B"
                    57.  
                    58. }
                    59.  
                    60. Rectangle
                    61. {
                    62. id: rec_separator
                    63. anchors.left: parent.left
                    64. anchors.top:lbl_h.bottom
                    65. anchors.leftMargin: 10
                    66. anchors.topMargin: 7
                    67. anchors.right: parent.right
                    68. anchors.rightMargin: 10
                    69. height: 1
                    70. color: "#E6E9Ef"
                    71. }
                    72.  
                    73. Label
                    74. {
                    75. id:lbl_b
                    76. text:lbl_body //+ img_h.x+img_clock.x+33
                    77. anchors.left: parent.left
                    78. anchors.top:rec_separator.bottom
                    79. anchors.leftMargin: 10
                    80. anchors.topMargin: 7
                    81. anchors.right: parent.right
                    82. anchors.rightMargin: 10
                    83. font.pixelSize: 14
                    84. wrapMode: Text.WordWrap
                    85. verticalAlignment: Text.AlignVCenter
                    86. color: "#26292B"
                    87. }
                    88.  
                    89. Label
                    90. {
                    91. id: img_clock
                    92. width: 13
                    93. height: 13
                    94. anchors.left: parent.left
                    95. anchors.verticalCenter: lbl_d.verticalCenter
                    96. anchors.leftMargin: 10
                    97. font.pixelSize: 13
                    98. text: "\ue007"
                    99. color:imgc_lock
                    100. }
                    101.  
                    102. Label
                    103. {
                    104. id:lbl_d
                    105. anchors.left: img_clock.right
                    106. anchors.leftMargin: 5
                    107. anchors.top:lbl_b.bottom
                    108. anchors.bottom: parent.bottom
                    109. anchors.topMargin: 9
                    110. anchors.bottomMargin: 10
                    111. text:lbl_date
                    112. color: "#607D8B"
                    113. verticalAlignment: Text.AlignVCenter
                    114. font.pixelSize: 12
                    115. }
                    116.  
                    117.  
                    118. Rectangle
                    119. {
                    120. id:lbl_st
                    121. width:wid/2
                    122. anchors.right: parent.right
                    123. height: lbl.contentHeight+6
                    124. anchors.verticalCenter: lbl_d.verticalCenter
                    125. anchors.rightMargin: 10
                    126. radius:3
                    127. color:lbl_color
                    128. Text
                    129. {
                    130. id:lbl
                    131. anchors.verticalCenter: lbl_st.verticalCenter
                    132. anchors.left: parent.left
                    133. anchors.leftMargin: 6
                    134. anchors.right: parent.right
                    135. anchors.rightMargin: 6
                    136. color: "#FFFFFF"
                    137. text:lbl_stage
                    138. horizontalAlignment: Text.AlignHCenter
                    139. font.pixelSize: 12
                    140. verticalAlignment: Text.AlignVCenter
                    141. elide: Text.ElideRight
                    142. // wrapMode: Text.WordWrap
                    143. }
                    144. }
                    145. }
                    146.  

                    код немного упростил, чтоб запускался без дополнительных трудностей

                      Алексей Внуков
                      • Jan. 22, 2021, 9:17 p.m.

                      в оригинале у меня модель qml заменяется соделью из С++, но принцип заполнения таска такой же

                        Алексей Внуков
                        • Jan. 22, 2021, 9:21 p.m.

                        по поводу делагатов, давно понял что лучшая практика это выносить в отдельный файл, если сам по себе делегат отображается правильно, то и в модели он будет правильный

                          Алексей Внуков
                          • Jan. 22, 2021, 9:38 p.m.

                          по вашему коду:
                          И еще такая ошибка "Unable to assign [undefined] to QString" - происходит когда в qml list передаются не существующие поля модели
                          columnCount() - если я правильно понял логику работы модели, то это поле нужно хранить в обьекте класса данных, чтоб потом через роль обратиться к нему, но это если у вас в каждом делегате будет разное колличество репитеров, если каждый раз одинаково то можно в моделе указывать, но у вас там что-то не так с реализацией

                            Алексей Внуков
                            • Jan. 22, 2021, 9:55 p.m.
                            • (edited)

                            немного поправив ваш делегат я получил такой результат

                              BlinCT
                              • Jan. 23, 2021, 5:33 p.m.

                              По поводу данной функции columnCount(), этот метод их модели возвращает колличество стобцов. Я просто из него сделал инвокбл метод.
                              И Я думал что для репитера это должно указывать столько он должен создать ячеек.
                              Наверное в этом и ошибка

                                BlinCT
                                • Jan. 23, 2021, 5:54 p.m.

                                Сейчас перепроверил сам метод, и он правильнео колличество обьектов передает. Значит проблема не в этом.

                                  BlinCT
                                  • Jan. 23, 2021, 8:25 p.m.

                                  Вся проблема в тмо что у меня репитор который должен правильно создавать по индексам эти ячейки. В случаи данной момедли 2 столбца а после засунуть туда правильный текст из модели. Вот тут какой то недочет у меня

                                    Алексей Внуков
                                    • Jan. 24, 2021, 10:34 p.m.

                                    а обязательно создавть через репитер? если с ним не получается, то можно в делегат просто квадрат с 2-я ячеками в них соответствующий текст, в модель обьекты так тоже писать (будет как мап - ключ-значение), и потом так же выносить в таблицу - получится левая колонка постоянная(ключи), а правая будет подтягиваться данными из системы

                                      BlinCT
                                      • Jan. 29, 2021, 11:21 p.m.
                                      • The answer was marked as a solution.

                                      В общем во сути ошибка была найдена) и она оказалась достаточно глупой с моей стороны, если я в листе создаю сроку с 2 колонками то наджо было делегат делать Row, а у меня там Rectangle)

                                        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