<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- views.qdoc -->
<title>Qt Quick Examples - Views | Qt Quick 5.12.6</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.12</td><td ><a href="qtquick-index.html">Qt Quick</a></td><td >Qt Quick Examples - Views</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.6 Reference Documentation</a></td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#running-the-example">Running the Example</a></li>
<li class="level1"><a href="#gridview-and-pathview">GridView and PathView</a></li>
<li class="level1"><a href="#dynamic-list">Dynamic List</a></li>
<li class="level2"><a href="#expanding-delegates">Expanding Delegates</a></li>
<li class="level1"><a href="#highlight">Highlight</a></li>
<li class="level1"><a href="#highlight-ranges">Highlight Ranges</a></li>
<li class="level1"><a href="#sections">Sections</a></li>
<li class="level1"><a href="#packages">Packages</a></li>
<li class="level1"><a href="#objectmodel">ObjectModel</a></li>
<li class="level1"><a href="#display-margins">Display Margins</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Qt Quick Examples - Views</h1>
<span class="subtitle"></span>
<!-- $$$views-brief -->
<p>This is a collection of QML model-view examples.</p>
<!-- @@@views -->
<!-- $$$views-description -->
<div class="descr"> <a name="details"></a>
<p class="centerAlign"><img src="images/qml-modelviews-example.png" alt="" /></p><p><i>Views</i> is a collection of small QML examples relating to model and view functionality. They demonstrate how to show data from a model using the Qt Quick view types. For more information, visit the <a href="qtquick-modelviewsdata-modelview.html">Models and Views in Qt Quick</a> page.</p>
<a name="running-the-example"></a>
<h2 id="running-the-example">Running the Example</h2>
<p>To run the example from Qt Creator, open the <b>Welcome</b> mode and select the example from <b>Examples</b>. For more information, visit Building and Running an Example.</p>
<a name="gridview-and-pathview"></a>
<h2 id="gridview-and-pathview">GridView and PathView</h2>
<p><i>GridView</i> and <i>PathView</i> demonstrate usage of these types to display views.</p>
<pre class="qml">
GridView {
anchors.fill: parent
cellWidth: 100; cellHeight: 100
focus: true
model: appModel
highlight: Rectangle { width: 80; height: 80; color: "lightsteelblue" }
delegate: Item {
width: 100; height: 100
Image {
id: myIcon
y: 20; anchors.horizontalCenter: parent.horizontalCenter
source: icon
}
Text {
anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
text: name
}
MouseArea {
anchors.fill: parent
onClicked: parent.GridView.view.currentIndex = index
}
}
}
</pre>
<a name="dynamic-list"></a>
<h2 id="dynamic-list">Dynamic List</h2>
<p><i>Dynamic List</i> demonstrates animation of runtime additions and removals to a <a href="qml-qtquick-listview.html">ListView</a>.</p>
<p>The <a href="qml-qtquick-listview.html">ListView</a>.onAdd signal handler runs an animation when new items are added to the view, and the <a href="qml-qtquick-listview.html">ListView</a>.onRemove another when they are removed.</p>
<pre class="qml">
Item {
ListView.onAdd: SequentialAnimation {
PropertyAction { target: delegateItem; property: "height"; value: 0 }
NumberAnimation { target: delegateItem; property: "height"; to: 80; duration: 250; easing.type: Easing.InOutQuad }
}
ListView.onRemove: SequentialAnimation {
PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: true }
NumberAnimation { target: delegateItem; property: "height"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
// Make sure delayRemove is set back to false so that the item can be destroyed
PropertyAction { target: delegateItem; property: "ListView.delayRemove"; value: false }
}
}
</pre>
<a name="expanding-delegates"></a>
<h3 id="expanding-delegates">Expanding Delegates</h3>
<p><i>Expanding Delegates</i> demonstrates delegates that expand when activated.</p>
<p>It has a complex delegate the size and appearance of which can change, displacing other items in the view.</p>
<pre class="qml">
Item {
id: recipe
// Create a property to contain the visibility of the details.
// We can bind multiple element's opacity to this one property,
// rather than having a "PropertyChanges" line for each element we
// want to fade.
property real detailsOpacity : 0
MouseArea {
anchors.fill: parent
onClicked: recipe.state = 'Details';
}
// Lay out the page: picture, title and ingredients at the top, and method at the
// bottom. Note that elements that should not be visible in the list
// mode have their opacity set to recipe.detailsOpacity.
Row {
id: topLayout
x: 10; y: 10; height: recipeImage.height; width: parent.width
spacing: 10
Image {
id: recipeImage
width: 50; height: 50
source: picture
}
Item {
id: details
x: 10; width: parent.width - 20
anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
opacity: recipe.detailsOpacity
}
// A button to close the detailed view, i.e. set the state back to default ('').
TextButton {
y: 10
anchors { right: background.right; rightMargin: 10 }
opacity: recipe.detailsOpacity
text: "Close"
onClicked: recipe.state = '';
}
states: State {
name: "Details"
PropertyChanges { target: background; color: "white" }
PropertyChanges { target: recipeImage; width: 130; height: 130 } // Make picture bigger
PropertyChanges { target: recipe; detailsOpacity: 1; x: 0 } // Make details visible
PropertyChanges { target: recipe; height: listView.height } // Fill the entire list area with the detailed view
// Move the list so that this item is at the top.
PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y }
// Disallow flicking while we're in detailed view
PropertyChanges { target: recipe.ListView.view; interactive: false }
}
transitions: Transition {
// Make the state changes smooth
ParallelAnimation {
ColorAnimation { property: "color"; duration: 500 }
NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
}
}
}
</pre>
<a name="highlight"></a>
<h2 id="highlight">Highlight</h2>
<p><i>Highlight</i> demonstrates adding a custom highlight to a <a href="qml-qtquick-listview.html">ListView</a>.</p>
<pre class="qml">
// Define a highlight with customized movement between items.
Component {
id: highlightBar
Rectangle {
width: 200; height: 50
color: "#FFFF88"
y: listView.currentItem.y;
Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
}
}
ListView {
id: listView
width: 200; height: parent.height
x: 30
model: PetsModel {}
delegate: petDelegate
focus: true
// Set the highlight delegate. Note we must also set highlightFollowsCurrentItem
// to false so the highlight delegate can control how the highlight is moved.
highlight: highlightBar
highlightFollowsCurrentItem: false
}
</pre>
<a name="highlight-ranges"></a>
<h2 id="highlight-ranges">Highlight Ranges</h2>
<p><i>Highlight Ranges</i> shows the three different highlight range modes of <a href="qml-qtquick-listview.html">ListView</a>.</p>
<pre class="qml">
Rectangle {
id: root
property int current: 0
property bool increasing: true
// Example index automation for convenience, disabled on click or tap
SequentialAnimation {
id: anim
loops: -1
running: true
ScriptAction {
script: if (increasing) {
current++;
if (current >= aModel.count -1) {
current = aModel.count - 1;
increasing = !increasing;
}
} else {
current--;
if (current <= 0) {
current = 0;
increasing = !increasing;
}
}
}
PauseAnimation { duration: 500 }
}
ListView {
id: list1
height: 50; width: parent.width
model: PetsModel {id: aModel}
delegate: petDelegate
orientation: ListView.Horizontal
highlight: Rectangle { color: "lightsteelblue" }
currentIndex: root.current
onCurrentIndexChanged: root.current = currentIndex
focus: true
}
ListView {
id: list2
y: 160
height: 50; width: parent.width
model: PetsModel {}
delegate: petDelegate
orientation: ListView.Horizontal
highlight: Rectangle { color: "yellow" }
currentIndex: root.current
preferredHighlightBegin: 80; preferredHighlightEnd: 220
highlightRangeMode: ListView.ApplyRange
}
ListView {
id: list3
y: 320
height: 50; width: parent.width
model: PetsModel {}
delegate: petDelegate
orientation: ListView.Horizontal
highlight: Rectangle { color: "yellow" }
currentIndex: root.current
onCurrentIndexChanged: root.current = currentIndex
preferredHighlightBegin: 125; preferredHighlightEnd: 125
highlightRangeMode: ListView.StrictlyEnforceRange
}
}
</pre>
<a name="sections"></a>
<h2 id="sections">Sections</h2>
<p><i>Sections</i> demonstrates the various section headers and footers available to <a href="qml-qtquick-listview.html">ListView</a>.</p>
<pre class="qml">
// The delegate for each section header
Component {
id: sectionHeading
Rectangle {
width: container.width
height: childrenRect.height
color: "lightsteelblue"
Text {
text: section
font.bold: true
font.pixelSize: 20
}
}
}
ListView {
id: view
anchors.top: parent.top
anchors.bottom: buttonBar.top
width: parent.width
model: animalsModel
delegate: Text { text: name; font.pixelSize: 18 }
section.property: "size"
section.criteria: ViewSection.FullString
section.delegate: sectionHeading
}
</pre>
<a name="packages"></a>
<h2 id="packages">Packages</h2>
<p><i>Packages</i> uses the Package type to transition delegates between two views.</p>
<p>It has a Package object which defines delegate items for each view and an item that can be transferred between delegates.</p>
<pre class="qml">
Package {
Text { id: listDelegate; width: parent.width; height: 25; text: 'Empty'; Package.name: 'list' }
Text { id: gridDelegate; width: parent.width / 2; height: 50; text: 'Empty'; Package.name: 'grid' }
Rectangle {
id: wrapper
width: parent.width; height: 25
color: 'lightsteelblue'
Text { text: display; anchors.centerIn: parent }
state: root.upTo > index ? 'inGrid' : 'inList'
states: [
State {
name: 'inList'
ParentChange { target: wrapper; parent: listDelegate }
},
State {
name: 'inGrid'
ParentChange {
target: wrapper; parent: gridDelegate
x: 0; y: 0; width: gridDelegate.width; height: gridDelegate.height
}
}
]
transitions: [
Transition {
ParentAnimation {
NumberAnimation { properties: 'x,y,width,height'; duration: 300 }
}
}
]
}
}
</pre>
<p>A DelegateModel allows the individual views to access their specific items from the shared package delegate.</p>
<pre class="qml">
DelegateModel {
id: visualModel
delegate: Delegate {}
model: myModel
}
ListView {
id: lv
height: parent.height/2
width: parent.width
model: visualModel.parts.list
}
GridView {
y: parent.height/2
height: parent.height/2
width: parent.width
cellWidth: width / 2
cellHeight: 50
model: visualModel.parts.grid
}
</pre>
<a name="objectmodel"></a>
<h2 id="objectmodel">ObjectModel</h2>
<p><i>ObjectModel</i> uses an <a href="qtquick-views-example.html#objectmodel">ObjectModel</a> for the model instead of a ListModel.</p>
<pre class="qml">
ObjectModel {
id: itemModel
Rectangle {
width: view.width; height: view.height
color: "#FFFEF0"
Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent }
Component.onDestruction: if (printDestruction) print("destroyed 1")
}
Rectangle {
width: view.width; height: view.height
color: "#F0FFF7"
Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent }
Component.onDestruction: if (printDestruction) print("destroyed 2")
}
Rectangle {
width: view.width; height: view.height
color: "#F4F0FF"
Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent }
Component.onDestruction: if (printDestruction) print("destroyed 3")
}
}
ListView {
id: view
anchors { fill: parent; bottomMargin: 30 }
model: itemModel
preferredHighlightBegin: 0; preferredHighlightEnd: 0
highlightRangeMode: ListView.StrictlyEnforceRange
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem; flickDeceleration: 2000
cacheBuffer: 200
}
</pre>
<a name="display-margins"></a>
<h2 id="display-margins">Display Margins</h2>
<p><i>Display Margins</i> uses delegates to display items and implements a simple header and footer components.</p>
<p>Files:</p>
<ul>
<li><a href="qtquick-views-delegatemodel-delegatemodel-qmlproject.html">views/delegatemodel/delegatemodel.qmlproject</a></li>
<li><a href="qtquick-views-delegatemodel-dragselection-qml.html">views/delegatemodel/dragselection.qml</a></li>
<li><a href="qtquick-views-delegatemodel-slideshow-qml.html">views/delegatemodel/slideshow.qml</a></li>
<li><a href="qtquick-views-gridview-gridview-example-qml.html">views/gridview/gridview-example.qml</a></li>
<li><a href="qtquick-views-listview-content-petsmodel-qml.html">views/listview/content/PetsModel.qml</a></li>
<li><a href="qtquick-views-listview-content-pressandholdbutton-qml.html">views/listview/content/PressAndHoldButton.qml</a></li>
<li><a href="qtquick-views-listview-content-recipesmodel-qml.html">views/listview/content/RecipesModel.qml</a></li>
<li><a href="qtquick-views-listview-content-smalltext-qml.html">views/listview/content/SmallText.qml</a></li>
<li><a href="qtquick-views-listview-content-textbutton-qml.html">views/listview/content/TextButton.qml</a></li>
<li><a href="qtquick-views-listview-content-togglebutton-qml.html">views/listview/content/ToggleButton.qml</a></li>
<li><a href="qtquick-views-listview-displaymargin-qml.html">views/listview/displaymargin.qml</a></li>
<li><a href="qtquick-views-listview-dynamiclist-qml.html">views/listview/dynamiclist.qml</a></li>
<li><a href="qtquick-views-listview-expandingdelegates-qml.html">views/listview/expandingdelegates.qml</a></li>
<li><a href="qtquick-views-listview-highlight-qml.html">views/listview/highlight.qml</a></li>
<li><a href="qtquick-views-listview-highlightranges-qml.html">views/listview/highlightranges.qml</a></li>
<li><a href="qtquick-views-listview-sections-qml.html">views/listview/sections.qml</a></li>
<li><a href="qtquick-views-main-cpp.html">views/main.cpp</a></li>
<li><a href="qtquick-views-objectmodel-objectmodel-qml.html">views/objectmodel/objectmodel.qml</a></li>
<li><a href="qtquick-views-package-delegate-qml.html">views/package/Delegate.qml</a></li>
<li><a href="qtquick-views-package-view-qml.html">views/package/view.qml</a></li>
<li><a href="qtquick-views-pathview-pathview-example-qml.html">views/pathview/pathview-example.qml</a></li>
<li><a href="qtquick-views-views-pro.html">views/views.pro</a></li>
<li><a href="qtquick-views-views-qml.html">views/views.qml</a></li>
<li><a href="qtquick-views-views-qmlproject.html">views/views.qmlproject</a></li>
<li><a href="qtquick-views-views-qrc.html">views/views.qrc</a></li>
</ul>
<p>Images:</p>
<ul>
<li><a href="images/used-in-examples/views/gridview/pics/AddressBook_48.png">views/gridview/pics/AddressBook_48.png</a></li>
<li><a href="images/used-in-examples/views/gridview/pics/AudioPlayer_48.png">views/gridview/pics/AudioPlayer_48.png</a></li>
<li><a href="images/used-in-examples/views/gridview/pics/Camera_48.png">views/gridview/pics/Camera_48.png</a></li>
<li><a href="images/used-in-examples/views/gridview/pics/DateBook_48.png">views/gridview/pics/DateBook_48.png</a></li>
<li><a href="images/used-in-examples/views/gridview/pics/EMail_48.png">views/gridview/pics/EMail_48.png</a></li>
<li><a href="images/used-in-examples/views/gridview/pics/TodoList_48.png">views/gridview/pics/TodoList_48.png</a></li>
<li><a href="images/used-in-examples/views/gridview/pics/VideoPlayer_48.png">views/gridview/pics/VideoPlayer_48.png</a></li>
<li><a href="images/used-in-examples/views/listview/content/pics/arrow-down.png">views/listview/content/pics/arrow-down.png</a></li>
<li><a href="images/used-in-examples/views/listview/content/pics/arrow-up.png">views/listview/content/pics/arrow-up.png</a></li>
<li><a href="images/used-in-examples/views/listview/content/pics/fruit-salad.jpg">views/listview/content/pics/fruit-salad.jpg</a></li>
<li><a href="images/used-in-examples/views/listview/content/pics/hamburger.jpg">views/listview/content/pics/hamburger.jpg</a></li>
<li><a href="images/used-in-examples/views/listview/content/pics/lemonade.jpg">views/listview/content/pics/lemonade.jpg</a></li>
<li><a href="images/used-in-examples/views/listview/content/pics/list-delete.png">views/listview/content/pics/list-delete.png</a></li>
<li><a href="images/used-in-examples/views/listview/content/pics/minus-sign.png">views/listview/content/pics/minus-sign.png</a></li>
<li><a href="images/used-in-examples/views/listview/content/pics/moreDown.png">views/listview/content/pics/moreDown.png</a></li>
<li><a href="images/used-in-examples/views/listview/content/pics/moreUp.png">views/listview/content/pics/moreUp.png</a></li>
<li><a href="images/used-in-examples/views/listview/content/pics/pancakes.jpg">views/listview/content/pics/pancakes.jpg</a></li>
<li><a href="images/used-in-examples/views/listview/content/pics/plus-sign.png">views/listview/content/pics/plus-sign.png</a></li>
<li><a href="images/used-in-examples/views/listview/content/pics/vegetable-soup.jpg">views/listview/content/pics/vegetable-soup.jpg</a></li>
<li><a href="images/used-in-examples/views/pathview/pics/AddressBook_48.png">views/pathview/pics/AddressBook_48.png</a></li>
<li><a href="images/used-in-examples/views/pathview/pics/AudioPlayer_48.png">views/pathview/pics/AudioPlayer_48.png</a></li>
<li><a href="images/used-in-examples/views/pathview/pics/Camera_48.png">views/pathview/pics/Camera_48.png</a></li>
<li><a href="images/used-in-examples/views/pathview/pics/DateBook_48.png">views/pathview/pics/DateBook_48.png</a></li>
<li><a href="images/used-in-examples/views/pathview/pics/EMail_48.png">views/pathview/pics/EMail_48.png</a></li>
<li><a href="images/used-in-examples/views/pathview/pics/TodoList_48.png">views/pathview/pics/TodoList_48.png</a></li>
<li><a href="images/used-in-examples/views/pathview/pics/VideoPlayer_48.png">views/pathview/pics/VideoPlayer_48.png</a></li>
</ul>
</div>
<!-- @@@views -->
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br/> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
distrib
>
Mageia
>
7
>
i586
>
media
>
core-updates
>
by-pkgid
>
6e2327ca1c896c6d674ae53117299f21
>
files
>
1824
