QListView with Two QTextEdit 's as Item

Question

In Qt Widget Application (c++), a part of my *.ui file consists of a QListView with two QTextEdits as its items like the below figure.

As you can see custom widget includes two QTextEdit that each one has its text and stylesheet. As I searched on the net, there are solutions like HtmlDelegate classes for rendering text of items on QListView. But these classes only present ONE QTextEdit as item for QListView. In future, I want sync the QListView scrol status with a QMultimedia status like Podcast apps. Does anyone have any idea?

120 is not so many. Then I think you can just put the widgets to a `QVBoxLayout` and then to `QScrollArea`. You do not need to bother with `QListView` and all the complicated stuff with editable delegates. — HiFile.app - best file manager, Nov 11 '22 at 16:21

score 1 · Accepted Answer · answered Nov 11 '22 at 23:48

well first of all you should create your custom widget like this:

Then you add it to your Model of QListView by using setIndexWidget function like this:

    QStandardItemModel *model = new QStandardItemModel(120, 1);
    ui->listView->setModel(model);

    for (int r = 0; r < 120; r++)
    {
        ui->listView->setIndexWidget(model->index(r, 0), new CustomTextEdits);
    }

Final Result:

you can see the source code here:

https://github.com/parisa-hr/SO-addwidgettoqlistview

score 0 · Answer 2 · answered Nov 12 '22 at 13:12

It isn't clear to me, but, couldn't we use QML, ListView, ListModel to handle the data and the rendering?

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick3D
Page {
    ListView {
        anchors.fill: parent
        model: ListModel {
            id: items
            Component.onCompleted: {
                for (let i = 0; i < 20; i++) {
                    let enText = "English Text " + (i + 1);
                    let itText = "Its Translate " + (i + 1);
                    append( { enText, itText } );
                }
            }
        }
        ScrollBar.vertical: ScrollBar {
            width: 20
            policy: ScrollBar.AlwaysOn
        }
        spacing: 2
        delegate: Frame {
            width: ListView.view.width - 20
            background: Rectangle {
                border.color: "black"
                border.width: 2
            }

            ColumnLayout {
                width: parent.width

                TextInput {
                    Layout.fillWidth: true
                    text: enText
                    horizontalAlignment: Qt.AlignHCenter
                    font.pointSize: 12
                    onAccepted: enText = text
                }

                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 2
                    color: "steelblue"
                }

                TextInput {
                    Layout.fillWidth: true
                    text: itText
                    horizontalAlignment: Qt.AlignHCenter
                    font.pointSize: 12
                    font.italic: true
                    color: "red"
                    onAccepted: itText = text
                }
            }
        }
    }
}

You can Try it Online!

If we want to have something like this in QML , [Repeater](https://doc.qt.io/qt-6/qml-qtquick-repeater.html) is a better choice, isn't it? Your answer raises this question for me. — Parisa.H.R, Nov 12 '22 at 20:18
Both Repeater and ListView are similar in that they both support a model. ListView has a bonus in that it has built-in "current" item, flickable, and scrollbar. The OP indicated scroll status was important and was already using QListView. But, to be honest the precise use case was somewhat vague. — Stephen Quan, Nov 12 '22 at 21:57

QListView with Two QTextEdit 's as Item

2 Answers2