BlinCT
BlinCTJan. 22, 2021, 8:12 a.m.

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

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

ListView
{
  id: tableView

  anchors.top: rowHeader.bottom
  anchors.left: parent.left
  anchors.right: parent.right
  anchors.bottom: parent.bottom

  flickableDirection: TableView.VerticalFlick

  clip: true
  model: root.model

  delegate: Rectangle
  {
    id: rect
    clip: true

    implicitWidth: 543
    implicitHeight: 22
    border.width: 1
    color: "red"

    Repeater
    {
      id: celsRepeater

      model: root.model.columnCount()

      Rectangle
      {
        id: rextText

        border.color: "blue"
        width: root.model.getSizeLongString(index)
        height: 15

        Text
        {
          width: 50

          height: 35

          anchors.fill: parent

          text: root.model.display
        }
      }
    }
  }

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

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

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!

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

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

    BlinCT
    • Jan. 22, 2021, 9:09 a.m.

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

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

      BlinCT
      • Jan. 22, 2021, 9:10 a.m.

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

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

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

          BlinCT
          • Jan. 22, 2021, 9:17 a.m.

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

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

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

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

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

                BlinCT
                • Jan. 22, 2021, 9:25 a.m.

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

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

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

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

                    если чисто qml:

                    import QtQuick 2.0
                    import QtQuick.Controls 2.12
                    import QtQuick.Window 2.13
                    import QtGraphicalEffects 1.15
                    
                    Window{
                        width: 640
                        height: 480
                        visible: true
                    
                    
                        Rectangle
                        {
                            id: rectangle
                            anchors.fill: parent
                            color: "#F0F2F5"
                        Flickable
                        {
                            clip: true
                            anchors.fill: parent
                            contentWidth: 1356
                    
                            ScrollBar.vertical: ScrollBar
                            {
                                width:5
                            }
                            ScrollBar.horizontal: ScrollBar
                            {
                                width:5
                            }
                    
                            property int c1: 0
                            property int c2: 0
                            property int c3: 0
                            property int c4: 0
                    
                            Component.onCompleted:
                            {
                    
                                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"})
                                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"})
                            }
                    
                            Rectangle
                            {
                                id:rec1
                                radius: 3
                                height: 50
                                anchors.left: parent.left
                                anchors.leftMargin: 28
                                anchors.top: parent.top
                                anchors.topMargin: 27
                                width: 310
                                clip: true
                    
                                layer.enabled: true
                                        layer.effect: OpacityMask {
                                            maskSource: Item {
                                                width: rec1.width
                                                height: rec1.height
                                                Rectangle {
                                                    anchors.centerIn: parent
                                                    width: rec1.width
                                                    height:rec1.height 
                                                    radius: 3
                                                }
                                            }
                                        }
                    
                                Rectangle
                                {
                                    id:r1
                                    anchors.top: parent.top
                                    anchors.left: parent.left
                                    anchors.right: parent.right
                                    color: "#F54E67"
                                    height: 3
                                }
                    
                                Label
                                {
                                    id:lbl_col1
                                    anchors.top: r1.bottom
                                    anchors.topMargin: 7
                                    anchors.left: parent.left
                                    anchors.leftMargin: 15
                                    text:  "вид"
                                    font.pixelSize: 14
                                }
                    
                                Label
                                {
                                    anchors.top: lbl_col1.bottom
                                    anchors.topMargin: 3
                                    anchors.left: parent.left
                                    anchors.leftMargin: 15
                                    text:"Элементов: " + red_model.count
                                }
                            }
                    
                            Rectangle {
                                anchors.top: rec1.bottom
                                anchors.topMargin: 10
                                anchors.horizontalCenter: rec1.horizontalCenter
                                width: 23
                                height: 3
                                color: "#F0F2F5"
                                Row
                                {
                                    spacing: 7
                                Rectangle
                                {
                                    color: "#CBD0D6"
                                    height: 3
                                    width: 3
                                }
                                Rectangle
                                {
                                    color: "#CBD0D6"
                                    height: 3
                                    width: 3
                                }
                                Rectangle
                                {
                                    color: "#CBD0D6"
                                    height: 3
                                    width: 3
                                }
                                }
                            }
                    
                            ListModel
                            {
                                id:red_model
                            }
                    
                            ListView
                            {
                                id:red_list
                                anchors.left: rec1.left
                                anchors.right: rec1.right
                                anchors.top: rec1.bottom
                                anchors.topMargin: 20
                                anchors.bottom: parent.bottom
                                clip: true
                                model: red_model
                                spacing:10
                                delegate: Task
                                {
                                    id:task
                                    wid: rec1.width
                                    img_header_color:h_col
                                    imgc_lock:img_c
                                    lbl_color:color_l
                                    lbl_head: head
                                    head_body: head_b
                                    lbl_body: l_body
                                    lbl_date: l_date
                                    img_header: img_h
                                    lbl_stage: l_stage
                                }
                            }
                        }
                    }
                    }
                    
                    

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

                    import QtQuick 2.0
                    import QtQuick.Controls 2.12
                    
                    Rectangle {
                    
                    id: rectangle
                        width: wid
                        height:  img_h.y+lbl_d.y+13+ lbl.contentHeight
                        property int wid:310
                        property string lbl_color: ""
                        property int img_header: 0
                        property string img_header_color: "black"//цвет заглавия
                        property string lbl_date: ""
                        property string lbl_body: ""
                        property string lbl_head: ""
                        property string imgc_lock: "black"//цвет часов
                        property string lbl_stage: ""
                        property string head_body: ""
                        //property int test: 0
                    
                        function onChar(i)
                        {
                                return "@"
                        }
                    
                        color: "#FFFFFF"
                    
                        Label {
                            id: img_h
                            width: 16
                            height: 16
                            anchors.left: parent.left
                            anchors.top:parent.top
                            anchors.leftMargin: 10
                            anchors.topMargin: 11.33
                            font.pixelSize: 16
                            color: img_header_color
                            text:onChar(img_header)//img_header
                    
                        }
                    
                    
                        Label
                        {
                            id:lbl_h
                            text:"<font color=\"#000000\">"+lbl_head+"</font>"+" "+"<font color=\"#607D8B\">"+head_body+"</font>"
                            anchors.left: img_h.right
                            anchors.top:parent.top
                            anchors.leftMargin: 10
                            anchors.topMargin: 10
                            anchors.right: parent.right
                            anchors.rightMargin: 10
                            font.pixelSize: 13
                            wrapMode: Text.WordWrap
                            verticalAlignment: Text.AlignVCenter
                            color: "#26292B"
                    
                        }
                    
                        Rectangle
                        {
                            id: rec_separator
                            anchors.left: parent.left
                            anchors.top:lbl_h.bottom
                            anchors.leftMargin: 10
                            anchors.topMargin: 7
                            anchors.right: parent.right
                            anchors.rightMargin: 10
                            height: 1
                            color: "#E6E9Ef"
                        }
                    
                        Label
                        {
                            id:lbl_b
                            text:lbl_body //+ img_h.x+img_clock.x+33
                            anchors.left: parent.left
                            anchors.top:rec_separator.bottom
                            anchors.leftMargin: 10
                            anchors.topMargin: 7
                            anchors.right: parent.right
                            anchors.rightMargin: 10
                            font.pixelSize: 14
                            wrapMode: Text.WordWrap
                            verticalAlignment: Text.AlignVCenter
                             color: "#26292B"
                        }
                    
                        Label
                        {
                            id: img_clock
                            width: 13
                            height: 13
                            anchors.left: parent.left
                            anchors.verticalCenter: lbl_d.verticalCenter
                            anchors.leftMargin: 10
                            font.pixelSize: 13
                            text: "\ue007"
                            color:imgc_lock
                        }
                    
                        Label
                        {
                            id:lbl_d
                            anchors.left: img_clock.right
                            anchors.leftMargin: 5
                            anchors.top:lbl_b.bottom
                            anchors.bottom: parent.bottom
                            anchors.topMargin: 9
                            anchors.bottomMargin: 10
                            text:lbl_date
                            color: "#607D8B"
                            verticalAlignment: Text.AlignVCenter
                            font.pixelSize: 12
                        }
                    
                    
                        Rectangle
                        {
                            id:lbl_st
                            width:wid/2
                            anchors.right: parent.right
                            height: lbl.contentHeight+6
                            anchors.verticalCenter: lbl_d.verticalCenter
                            anchors.rightMargin: 10
                            radius:3
                            color:lbl_color
                            Text
                            {
                                id:lbl
                                anchors.verticalCenter: lbl_st.verticalCenter
                                anchors.left: parent.left
                                anchors.leftMargin: 6
                                anchors.right: parent.right
                                anchors.rightMargin: 6
                                color: "#FFFFFF"
                                text:lbl_stage
                                horizontalAlignment: Text.AlignHCenter
                                font.pixelSize: 12
                                verticalAlignment: Text.AlignVCenter
                                elide: Text.ElideRight
                              //  wrapMode: Text.WordWrap
                            }
                        }
                    }
                    
                    

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

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

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

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

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

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

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

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

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

                              BlinCT
                              • Jan. 23, 2021, 6:33 a.m.

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

                                BlinCT
                                • Jan. 23, 2021, 6:54 a.m.

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

                                  BlinCT
                                  • Jan. 23, 2021, 9:25 a.m.

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

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

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

                                      BlinCT
                                      • Jan. 29, 2021, 12: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
                                        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
                                        Evgenii Legotckoi
                                        Evgenii LegotckoiOct. 31, 2024, 9:37 p.m.
                                        Django - Lesson 064. How to write a Python Markdown extension Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
                                        A
                                        ALO1ZEOct. 19, 2024, 3:19 p.m.
                                        Fb3 file reader on Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
                                        ИМ
                                        Игорь МаксимовOct. 5, 2024, 2:51 p.m.
                                        Django - Lesson 064. How to write a Python Markdown extension Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
                                        d
                                        dblas5July 5, 2024, 6:02 p.m.
                                        QML - Lesson 016. SQLite database and the working with it in QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
                                        k
                                        kmssrFeb. 9, 2024, 2:43 a.m.
                                        Qt Linux - Lesson 001. Autorun Qt application under Linux как сделать автозапуск для флэтпака, который не даёт создавать файлы в ~/.config - вот это вопрос ))
                                        Now discuss on the forum
                                        Evgenii Legotckoi
                                        Evgenii LegotckoiJune 24, 2024, 10:11 p.m.
                                        добавить qlineseries в функции Я тут. Работы оень много. Отправил его в бан.
                                        t
                                        tonypeachey1Nov. 15, 2024, 2:04 p.m.
                                        google domain [url=https://google.com/]domain[/url] domain [http://www.example.com link title]
                                        NSProject
                                        NSProjectJune 4, 2022, 10:49 a.m.
                                        Всё ещё разбираюсь с кешем. В следствии прочтения данной статьи. Я принял для себя решение сделать кеширование свойств менеджера модели LikeDislike. И так как установка evileg_core для меня не была возможна, ибо он писался…
                                        9
                                        9AnonimOct. 25, 2024, 4:10 p.m.
                                        Машина тьюринга // Начальное состояние 0 0, ,<,1 // Переход в состояние 1 при пустом символе 0,0,>,0 // Остаемся в состоянии 0, двигаясь вправо при встрече 0 0,1,>…

                                        Follow us in social networks