m
Jan. 11, 2019, 2 a.m.

QML C++

ListView, height

Добрый вечер.
Написал свою модель на основе QAbstractListModel как тут .
Все заработало но у меня элементов больше чем в примере. Соответственно не все помещаются в область ограниченную высотой height:200. При прокрутке списка оставшиеся элементы вне поля видимости не подгружаются.При увелечении height элементов становится больше.
Вопрос.
Как правильно задать параметр height?

3

Do you like it? Share on social networks!

23
m
  • Jan. 11, 2019, 2:11 a.m.

Забыл добавить.
Все это дела поместил в заранее сформированный QWidget с помощью QQuickWidget а не QQuickView как в примере

    Алексей Внуков
    • Jan. 11, 2019, 3:43 a.m.
    • (edited)

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

    п.с. У вас таки интерфейс на виджетах или qml?

      Evgenii Legotckoi
      • Jan. 11, 2019, 12:51 p.m.

      Добрый день!

      Думаю, что здесь ещё нужно поместить всё в ScrollArea, чтобы были полосы прокрутки.

        m
        • Jan. 11, 2019, 8:58 p.m.

        Добрый вечер. Постепенно перевожу с виджета на QML

          m
          • Jan. 11, 2019, 9:54 p.m.

          Полосу прокрутки добовляю с помощью ScrollBar.vertical: ScrollBar {} она то появляется. Вопрос то в другом.
          Вот например

          1. ListView {
          2. width: 160
          3. height: 240
          4.  
          5. model: 100
          6.  
          7. delegate: ItemDelegate {
          8. text: modelData
          9. width: parent.width
          10.  
          11. }
          12.  
          13. ScrollIndicator.vertical: ScrollIndicator { }
          14. }

          Элементы не попавшие в область появляются при прокрутке скрола.
          У меня же количества объектов на прямую зависит от высоты ListView.
          Выстовляю например height:100 подгружается 10 наименований и далее пустота. или 200 тогда 25 наименований
          Как я понимаю ListView должена знать либо общее количество объектов жевущий в модели либо должен уметь при прокрутке их подгружать из модели.

            Алексей Внуков
            • Jan. 11, 2019, 10:07 p.m.
            • (edited)

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

            1. Rectangle
            2. {
            3. id: events_arch
            4. anchors.top: top_rect_arch.top
            5. anchors.bottom: top_rect_arch.bottom
            6. anchors.left: select_arch.right
            7. anchors.right: parent.right
            8. anchors.margins: 5
            9. color: style.secondMainColor
            10.  
            11. ListView {
            12. id: tableView
            13. anchors.fill: parent
            14. anchors.margins: 5
            15. model: eventModel
            16.  
            17. highlight: highlight
            18. delegate: CheckBox
            19. {
            20. id: ch_m
            21. text: N+" "+ " "+ENG_TEXT
            22. indicator: Rectangle
            23. {
            24. anchors.verticalCenter: parent.verticalCenter
            25. implicitHeight:16
            26. implicitWidth:16
            27. radius: 3
            28. color:style.textColor
            29. border.color: style.mainBorderColor
            30. border.width: 1
            31.  
            32. Rectangle {
            33. visible: checked
            34. color: style.greenColor
            35. border.color: "#333"
            36. radius: 1
            37. anchors.margins: 4
            38. anchors.fill: parent
            39. }
            40. }
            41. contentItem: Text
            42. {
            43. leftPadding: ch_m.indicator.width + 4
            44. color: "#d0d0d0"
            45. text:ch_m.text
            46. horizontalAlignment: Text.AlignLeft
            47. verticalAlignment: Text.AlignVCenter
            48. }
            49. onCheckedChanged:
            50. {
            51. n_event+=N+','
            52. }
            53. }
            54. }
            55. }
            56.  

            список берет все что есть в моделе

              Evgenii Legotckoi
              • Jan. 11, 2019, 10:10 p.m.

              Добавлю только, что может ещё понадобиться использовать clip: true в Rectangle или ListView, а то могут элементы вылезать за границы парента

                Алексей Внуков
                • Jan. 11, 2019, 10:15 p.m.

                благодарю, учту

                  m
                  • Jan. 12, 2019, 2:06 a.m.

                  Все равно не пойму. Если статически набиваю все работает

                  1. ListModel {
                  2. id:productListModel1
                  3. ListElement {
                  4.  
                  5. }
                  6. ListElement {
                  7.  
                  8. }
                  9. ListElement {
                  10.  
                  11. }
                  12. ListElement {
                  13.  
                  14. }
                  15. ListElement {
                  16.  
                  17. }
                  18. ListElement {
                  19.  
                  20. }
                  21.  
                  22. }

                  Если динамически то показывает один элемент. Хотя отладчик говорит что в модели живет 10.

                    m
                    • Jan. 12, 2019, 2:11 a.m.
                    1. Rectangle {
                    2. id: mainTabLayout
                    3. clip: true
                    4. ListView {
                    5. id: view
                    6. anchors.fill: parent
                    7. cacheBuffer: 100 * 10
                    8. anchors.margins: 10
                    9. spacing: 10
                    10. model: productListModel
                    11. delegate: Rectangle {
                    12. id: delegateproduct
                    13. width: view.width
                    14. height: 50
                    15. color: "orange"
                    16. }
                    17. ScrollBar.vertical: ScrollBar {}
                    18. }
                    19.  
                    20. }

                    Выстовляю значение mainTabLayout напримет height: 300 отображаются уже 5 элементов.

                      Алексей Внуков
                      • Jan. 12, 2019, 2:15 a.m.

                      от куда берете данные?

                        m
                        • Jan. 12, 2019, 2:27 a.m.

                        .h

                        1. #include <QAbstractListModel>
                        2. #include <QJsonObject>
                        3.  
                        4. class ProductListItem
                        5. {
                        6. public:
                        7. ProductListItem(const QString &imgresurs, const QString &article,const QString &name_article);
                        8.  
                        9. QString imgresurs() const;
                        10. QString article() const;
                        11. QString name_article() const;
                        12.  
                        13. private:
                        14. QString m_imgresurs;
                        15. QString m_article;
                        16. QString m_name_article;
                        17. };
                        18.  
                        19.  
                        20. class ProductListModel : public QAbstractListModel
                        21. {
                        22. Q_OBJECT
                        23.  
                        24. public:
                        25. explicit ProductListModel(QObject *parent = nullptr);
                        26.  
                        27. enum Roles{
                        28. NameArticleRole = Qt::UserRole+1,
                        29. ArticleRole,ImgResursRole,PriseRole
                        30. };
                        31.  
                        32. // Basic functionality:
                        33. virtual int rowCount(const QModelIndex &parent = QModelIndex()) const override;
                        34.  
                        35. virtual QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
                        36.  
                        37. // Editable:
                        38. virtual bool setData(const QModelIndex &index, const QVariant &value,int role = Qt::EditRole) override;
                        39.  
                        40. void addItem(const ProductListItem &item);
                        41.  
                        42.  
                        43. protected:
                        44.  
                        45. virtual QHash<int, QByteArray> roleNames() const override;
                        46.  
                        47. private:
                        48.  
                        49. QList<ProductListItem> m_data;
                        50.  
                        51. };

                        .cpp

                        1. ProductListItem::ProductListItem(const QString &imgresurs, const QString &article,const QString &name_article)
                        2. : m_imgresurs(imgresurs), m_article(article), m_name_article(name_article)
                        3. {
                        4. }
                        5.  
                        6. QString ProductListItem::imgresurs() const
                        7. {
                        8. return m_imgresurs;
                        9. }
                        10.  
                        11. QString ProductListItem::article() const
                        12. {
                        13. return m_article;
                        14. }
                        15.  
                        16. QString ProductListItem::name_article() const
                        17. {
                        18. return m_name_article;
                        19. }
                        20.  
                        21.  
                        22.  
                        23.  
                        24. ProductListModel::ProductListModel(QObject *parent)
                        25. : QAbstractListModel(parent)
                        26. {
                        27. }
                        28.  
                        29. int ProductListModel::rowCount(const QModelIndex &parent) const
                        30. {
                        31. // For list models only the root node (an invalid parent) should return the list's size. For all
                        32. // other (valid) parents, rowCount() should return 0 so that it does not become a tree model.
                        33. Q_UNUSED(parent);
                        34. return this->m_data.count();
                        35.  
                        36. }
                        37.  
                        38. QVariant ProductListModel::data(const QModelIndex &index, int role) const
                        39. {
                        40.  
                        41.  
                        42. const ProductListItem item = this->m_data.at(index.row());
                        43.  
                        44. switch (role) {
                        45. case ArticleRole:
                        46. return QVariant(item.article());
                        47. case ImgResursRole:
                        48. return QVariant("item.imgresurs());
                        49. case NameArticleRole:
                        50. return QVariant(item.name_article());
                        51. default:
                        52. return QVariant();
                        53. }
                        54.  
                        55. }
                        56.  
                        57. bool ProductListModel::setData(const QModelIndex &index, const QVariant &value, int role)
                        58. {
                        59.  
                        60.  
                        61. return false;
                        62. }
                        63.  
                        64. void ProductListModel::addItem(const ProductListItem &item)
                        65. {
                        66.  
                        67. beginInsertRows(QModelIndex(), rowCount(), rowCount());
                        68. m_data << item;
                        69. endInsertRows();
                        70. }
                        71.  
                        72. QHash<int, QByteArray> ProductListModel::roleNames() const
                        73. {
                        74. QHash<int, QByteArray> roles = QAbstractListModel::roleNames();
                        75. roles[NameArticleRole] = "name_article";
                        76. roles[ArticleRole] = "article";
                        77. roles[ImgResursRole] = "imgresurs";
                        78. return roles;
                        79. }

                        тут собственно вызываю

                        1. ProductListModel model;
                        2. // Наполняем модель
                        3. for(int i = 0; i<array->count();i++){
                        4. QJsonObject obj = array->at(i).toObject();
                        5. model.addItem(ProductListItem(obj["img"].toString(),
                        6. obj["article"].toString(),
                        7. obj["name_article"].toString()));
                        8. }
                        9.  
                        10. this->m_quickWidget = new QQuickWidget(this) ;
                        11. this->m_quickWidget->engine()->rootContext()->setContextProperty("productListModel",&model);
                        12. this->m_quickWidget->setSource(QUrl("qrc:/Category.qml"));
                        13. this->m_quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
                        14. ui->gridLayout_2->addWidget(this->m_quickWidget, 1, 0);
                          Алексей Внуков
                          • Jan. 12, 2019, 3:10 a.m.

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

                          1. import QtQuick 2.12
                          2. import QtQuick.Controls 1.4
                          3. import QtQuick.Controls 2.2
                          4. import QtQuick.Window 2.12
                          5.  
                          6. Window {
                          7. visible: true
                          8. width: 640
                          9. height: 480
                          10. title: qsTr("Hello World")
                          11. Rectangle
                          12. {
                          13. anchors.fill: parent
                          14.  
                          15. id: mainTabLayout
                          16. clip: true
                          17. ListView {
                          18. id: view
                          19. anchors.fill: parent
                          20. cacheBuffer: 100 * 10
                          21. anchors.margins: 10
                          22. spacing: 10
                          23. model:["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28"]
                          24. delegate: Rectangle {
                          25. id: delegateproduct
                          26. width: view.width
                          27. height: 50
                          28. color: "orange"
                          29. }
                          30. ScrollBar.vertical: ScrollBar {}
                          31. }
                          32. }
                          33. }
                          34.  

                          копайте в сторону вашей модели и проверьте данные которые приходят и которые находятся самой модели

                            m
                            • Jan. 12, 2019, 3:19 a.m.

                            "почему у вас в делегате просто оранжевые прямоугольники" упростил для показа код.

                              m
                              • Jan. 12, 2019, 3:22 a.m.

                              Не пойму что не так).

                                m
                                • Jan. 12, 2019, 3:27 a.m.

                                Проблема явно с моделью.

                                  m
                                  • Jan. 12, 2019, 3:34 a.m.

                                  Отрисовывается только первый элемент модели. Который показан в отладочной информации.

                                    Алексей Внуков
                                    • Jan. 12, 2019, 3:39 a.m.
                                    • (edited)

                                    а у вас модель заполняется в main.cpp? если да, попробуйте данную реализацию вынести в функцию класса создания модели, и вызывать наполнение модели в конструкторе класса.

                                    пример (конструктор модели из предыдущего кода)

                                    1. EventSqlModel::EventSqlModel(QObject *parent): QSqlQueryModel(parent)
                                    2. {
                                    3. this->updateModel();
                                    4. }
                                    5.  
                                    6. void SqlQueryModel::updateModel()
                                    7. {
                                    8. QSqlQueryModel::setQuery(query);
                                    9. generateRoleNames();
                                    10. }
                                      m
                                      • Jan. 12, 2019, 3:47 a.m.

                                      Модель наполняется не в main. Наполнение производится по сигналу из дерева категорий

                                        m
                                        • Jan. 12, 2019, 3:52 a.m.

                                        Интересно что virtual QVariant data срабатывает только один раз хотя m_data>1

                                          m
                                          • Jan. 12, 2019, 3:53 a.m.

                                          Ладно не буду вас отвлекать повожусь сам. Спасибо)

                                            Алексей Внуков
                                            • Jan. 12, 2019, 4:08 a.m.

                                            мне уже и самому интересно.
                                            перенесите "setContextProperty("productListModel",&model)" в main.cpp
                                            простенький пример можно посмотреть тут а это помогло мне когда разбирался с моделями

                                              m
                                              • Jan. 13, 2019, 10:52 p.m.
                                              • The answer was marked as a solution.

                                              И так может кому будет интересно решил свою проблему следующим путем.
                                              Через дизайнер в базовый виджет добавил QQuickWidget (назвал его listProducts)
                                              Это соответственно убрал.

                                              1. this->m_quickWidget = new QQuickWidget(this) ;
                                              2. this->m_quickWidget->engine()->rootContext()->setContextProperty("productListModel",&model);
                                              3. this->m_quickWidget->setSource(QUrl("qrc:/Category.qml"));
                                              4. this->m_quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
                                              5. ui->gridLayout_2->addWidget(this->m_quickWidget, 1, 0);

                                              а вместо написал

                                              1. ui->listProducts->engine()->rootContext()->setContextProperty("productListModel",model);
                                              2. ui->listProducts->setSource(QUrl("qrc:/Category.qml"));
                                              3. ui->listProducts->setResizeMode(QQuickWidget::SizeRootObjectToView);

                                              и все заработало) Всем спасибо.

                                                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