Using the VisualItemModel in a QML application makes a QML Item a model to display data

The VisualItemModel makes it possible to turn a QML Item into a Model for our ListView. The Model can contain either data or a delegate. The Items contained in the VisualItemModel provide deletes that can be used to draw the data content. The Model does not provide any roles, which means we cannot use any “model.xxxx” to reference our Model data. The VisualItemModel is suitable for situations where each delegate display in the ListView is different, but we can still use the ListView to display our data and use ListView features to display and scroll data. Read more about ObjectModel. We can use ObjectModel instead of VisualItemModel to achieve the same thing.

\

A simple routine is as follows:

\

    Page {
        title: i18n.tr("VisualItemModel")

        VisualItemModel {
            id: itemModel
            Rectangle { height: view.height/3; width: view.width; color: "red" }
            Rectangle { height: view.height/3; width: view.width; color: "green" }
            Rectangle { height: view.height/3; width: view.width; color: "blue" }
        }

        ListView {
            id: view
            anchors.fill: parent
            model: itemModel
        }

    }
Copy the code

\

\

Code: github.com/liu-xiao-gu…

\

Our other routine code is shown below:

\

Main.qml

\

Import QtQuick 2.0 import Ubuntu.Components 1.1 /*! \brief MainView with a Label and Button elements. */ MainView { // objectName for functional testing purposes (autopilot-qt5) objectName: "mainView" // Note! applicationName needs to match the "name" field of the click manifest applicationName: "visualitemmodel.liu-xiao-guo" /* This property enables the application to change orientation when the device is rotated. The default is false. */ //automaticOrientation: true // Removes the old toolbar and enables new features of the new header. useDeprecatedToolbar: false width: units.gu(60) height: units.gu(85) Page { title: i18n.tr("visualitemmodel") Rectangle { color: "lightgray" anchors.fill: parent VisualItemModel { id: itemModel Rectangle { width: view.width; height: view.height - footer.height color: "#FFFEF0" Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent } } Rectangle { width: view.width; height: view.height - footer.height color: "#F0FFF7" Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent } } Rectangle { width: view.width; height: view.height - footer.height color: "#F4F0FF" Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent } } } UbuntuListView { id: view anchors { fill: parent; bottomMargin: 30 } model: itemModel preferredHighlightBegin: 0; preferredHighlightEnd: 0 highlightRangeMode: ListView.StrictlyEnforceRange orientation: ListView.Horizontal highlightMoveVelocity : 5000 snapMode: ListView.SnapOneItem highlightMoveDuration: 1000 flickDeceleration: 2000 Component.onCompleted: { console.log("velocity: " + view.horizontalVelocity) console.log("highlightMoveDuration: " + view.highlightMoveDuration) } } } Row { id: footer anchors { bottom: parent.bottom } anchors.bottomMargin: units.gu(1) // anchors.centerIn: parent anchors.horizontalCenter: parent.horizontalCenter spacing: units.gu(4) height: units.gu(3) Repeater { model: itemModel.count Rectangle { width: units.gu(3); Height: width RADIUS: units.gu(1.5) color: view.currentIndex == index? "blue" : "yellow" MouseArea { width: units.gu(3); height: width anchors.centerIn: parent onClicked: view.currentIndex = index } } } } } }Copy the code

\

   \

\

In the above routine, we can click on the dot below to switch our page. We can also use the ListView feature to swipe our screen left and right to change the current Page number. This applies to situations where different pages are presented, and each page is different.

\

Our source code is at: github.com/liu-xiao-gu…

\

\

\