summaryrefslogtreecommitdiffstats
path: root/doc/src/declarative/qmlviews.qdoc
blob: c207d9a8aef0362e50c7f809aac2d64dc5b331c3 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
/****************************************************************************
**
** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
** All rights reserved.
** Contact: Nokia Corporation (qt-info@nokia.com)
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** No Commercial Usage
** This file contains pre-release code and may not be distributed.
** You may use this file in accordance with the terms and conditions
** contained in the Technology Preview License Agreement accompanying
** this package.
**
** GNU Free Documentation License
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of this
** file.
**
** If you have questions regarding the use of this file, please contact
** Nokia at qt-info@nokia.com.
** $QT_END_LICENSE$
**
****************************************************************************/

/*!
\page qml-views.html
\ingroup qml-features
\contentspage QML Features
\previouspage {QML Data Models}{Structuring Data with Models}
\nextpage {Extending QML Functionalities using C++}
\title Presenting Data with Views

\section1 Introduction

Views are containers for collections of items. They are feature-rich and can be
customizable to meet style or behavior requirements.

A set of standard views are provided in the basic set of Qt Quick
graphical elements:

\list
\o \l{#ListView}{ListView} arranges items in a horizontal or vertical list
\o \l{#GridView}{GridView} arranges items in a grid within the available space
\o \l{#PathView}{PathView} arranges items on a path
\o \l{WebView}{WebView} - available from the Qt WebKit module.

\endlist

Unlike these items, \l WebView is not a fully-featured view item, and needs
to be combined with a \l Flickable item to create a view that performs like
a Web browser.

\section1 Models

Views display a \l{qml-data-models}{models} onto the screen. A model could be a simple list of \l{QML Data Models#An Integer}{integer} or a \l{qml-c++-models}{C++ models}.

To assign a model to a view, bind the view's \c model property to a model.

\section1 ListView

\l ListView shows a classic list of items with horizontal or vertical placing
of items.

\beginfloatright
\inlineimage qml-listview-snippet.png
\endfloat

The following example shows a minimal ListView displaying a sequence of
numbers (using an \l{QML Data Models#An Integer}{integer as a model}).
A simple delegate is used to define an items for each piece of data in the
model.

\clearfloat
\snippet doc/src/snippets/declarative/listview/listview-snippet.qml document



\section2 GridView

\l GridView displays items in a grid like an file manager's icon view.

\section2 PathView

\l PathView displays items on a path, where the selection remains in
the same place and the items move around it.

\section1 Decorating Views

\section2 Headers and Footers

\section2 Sections

\section2 Navigation

In traditional user interfaces, views can be scrolled using standard
controls, such as scroll bars and arrow buttons. In some situations, it
is also possible to drag the view directly by pressing and holding a
mouse button while moving the cursor. In touch-based user interfaces,
this dragging action is often complemented with a flicking action, where
scrolling continues after the user has stopped touching the view.

\section1 Further Reading
*/