Use Visualitemmodel in QML applications to make QML ITEML a model to display data

Visualitemmodel can make it possible for us to turn QML item into the model of our ListView. This model can contain both data and delegate. The Visualitemmodel contains an item that provides a delete that can be used to draw data content. This model does not provide any roles, which means that we cannot use any "model.xxxx" to reference our model data. Visualitemmodel is appropriate for each delegate in the ListView, but we can still use the ListView to display our data and use the ListView feature to present and scroll the data. Read ObjectModel with more. We can use ObjectModel instead of Visualitemmodel to accomplish 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.hei GHT/3; Width:view.width; Color: "Blue"}        }        ListView {            id:view            anchors.fill:parent            model:itemmodel        }    }

Code: Git clone https://gitcafe.com/ubuntu/visualitemmodel1.git

Our other example code shows the following:

Main.qml

Import QtQuick 2.0import 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" /* The 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 (height:units.gu) page {title:i18n.tr ("Visualitemmode                L ") 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.bol D:true; Anchors.centerIn:parent}} Rectangle {width:view.width; Height:view. Height-footer.height color: "#F4F0FF" text {text: "Page 3"; font.bold:true; anch Ors.centerIn:parent}}} ubuntulistview {Id:view an chors {fill:parent; bottommargin:30} Model:itemmodel preferredhighlightbegin:0; preferredhighlightend:0 HighlightRangeMode:ListView.StrictlyEnforceRange Orientation:list            View.horizontal highlightmovevelocity:5000 SnapMode:ListView.SnapOneItem    highlightmoveduration:1000 flickdeceleration:2000 component.oncompleted: { Console.log ("Velocity:" + view.horizontalvelocity) Console.log ("Highlightmoveduration:" + Vie w.highlightmoveduration)}}} Row {Id:footer anchors {bo Ttom:parent.bottom} anchors.bottomMargin:units.gu (1)//Anchors.centerIn:parent Ancho Rs.horizontalCenter:parent.horizontalCenter Spacing:units.gu (4) Height:units.gu (3) Rep Eater {model:itemModel.count Rectangle {width:units.gu (3); Height:wi DTH 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}}}}} 

In the above routines, we can click on the dots below to switch our page. We can also use the features of the ListView to swipe our images to change the current page number. This situation is suitable for displaying different pages, and each page is different.
Our source code is: Git clone https://gitcafe.com/ubuntu/visualitemmodel.git

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Use Visualitemmodel in QML applications to make QML ITEML a model to display data