QML and QListView

Falk

Hello everybody,

QT and QML are new to me. I have a question about QML and Listview.
I have something nice created and it is also displayed clean.

I work with a DataObject and have it displayed via QQuickView.
When I run my program, the listview window will open and the objects will be displayed graphically (like QML).

My question is, if you can show what you can do with QQuickView in a mainwindow with QListView. Because I want the mainwindow is already there and by button filled the list.

Possible yes / no? and if possible how?

Because how do you connect ui-> listview-> setModel with the listview model from the QML.

int main(int argc, char ** argv)
{
    QGuiApplication app(argc, argv);

    QList<QObject*> dataList;
    dataList.append(new DataObject("Item 1", "lightgray", "1","1","110","30"));
    dataList.append(new DataObject("Item 2", "lightgray", "2","1","140","40"));
    dataList.append(new DataObject("Item 3", "lightgray", "3","1","120","20"));
    dataList.append(new DataObject("Item 4", "lightgray", "4","1","130","10"));

    QQuickView view;
    view.setResizeMode(QQuickView::SizeRootObjectToView);
    QQmlContext *ctxt = view.rootContext();
    ctxt->setContextProperty("myModel", QVariant::fromValue(dataList));
//![0]

    view.setSource(QUrl("qrc:view.qml"));
    view.show();

Thank you
Falk

dheerendra

Your model is in QML or Qt side ? If it is Qt side you can directly work QListView. No need to go via QML and Qt etc.

Still not clear what r u trying to achieve.

devDawg

Yeah, not sure what you are shooting for here. Please try to be more clear.. I know it may be tough, as English may not be your first language.

Your approach to implementing your model really depends on what you'll be using it for.

If you want the user to be able to edit or add to the data during run time, define a class in C++ that subclasses QAbstractItemModel. You can then define this class as a QML type or set it as a context property. See this for reference: http://doc.qt.io/qt-5/model-view-programming.html
If the items in the list are not going to change, defining your model in QML very well might be the easier way to go: http://doc.qt.io/qt-5/qtqml-models-qmlmodule.html

If I were you, I would go with the 1st option, even though it takes more effort. Again, it depends on what you're going for.

Falk

I'm sorry I'm writing now.

I try to rewrite it differently.

I changed the sample project "objectlistmodel" as a test for my purpose.

When I start the program the listview is generated by QQuickview in main.cpp.

Correct?

So I want to use a mainwindow.ui. in the mainwindow.ui I used a QListView.

The question is, do I get my model what wrote in the QML, in the listview of mainwindow.ui?

import QtQuick 2.0

ListView {
    width: 782; height: 700
    model: myModel
    delegate: Rectangle {
        height: 112
        width: 782
        radius: 2
        border.color: "grey"
        color: model.modelData.color

        Image {
            width: 90; height: 90
            source: "toolIcons/Mill.png"
            x: 10
            y: 10
        }

        Text {  color: "black"
                text: name
                x: 150
                y: 10
                font.pointSize: 12; font.bold: true
        }
        Text {  color: "black"
                text: text1
                x: 150
                y: 90
        }
        Text {  color: "black"
                text: edge
                x: 500
                y: 90
        }
        Text {  color: "black"
                text: "L:"
                x: 560
                y: 90
        }
        Text {  color: "black"
                text: length
                x: 610
                y: 90
        }
        Text {  color: "black"
                text: "mm"
                x: 640
                y: 90
        }
        Text {  color: "black"
                text: "R:"
                x: 670
                y: 90
        }
        Text {  color: "black"
                text: T_radius
                x: 720
                y: 90
        }
        Text {  color: "black"
                text: "mm"
                x: 750
                y: 90
        }
    }
}