Doc: Update properties for Grid View, List View, and Path View

Task-number: QDS-4561
Change-Id: I80b33d38d9aa234aa05f172ee815773927802e31
Reviewed-by: Henning Gründl <henning.gruendl@qt.io>
This commit is contained in:
Leena Miettinen
2021-08-13 16:40:12 +02:00
parent 3637830793
commit 2aed13529b
7 changed files with 37 additions and 20 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 44 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 16 KiB

View File

@@ -56,15 +56,20 @@
\section1 List and Grid Views \section1 List and Grid Views
A list view organizes components as a list, whereas a grid view organizes Create instances of \uicontrol {List View} and \uicontrol {Grid View}
them as a grid. By default, components in list and grid views flow components to organize other component instances in list or grid format.
vertically from left to right. They are laid out from left to right They are available in \l Library > \uicontrol Components >
horizontally, and from top to bottom vertically. \uicontrol {Default Components} > \uicontrol Views.
A \uicontrol {List View} organizes other components as a list, whereas a
\uicontrol {Grid View} organizes them as a grid. By default, components
in list and grid views flow vertically from left to right. They are laid
out from left to right horizontally, and from top to bottom vertically.
You can change the list view orientation in the \uicontrol Orientation You can change the list view orientation in the \uicontrol Orientation
field and the grid view flow in the \uicontrol Flow field. You can change field and the grid view flow in the \uicontrol Flow field. You can change
the layout direction in the \uicontrol {Layout direction} field. These the layout direction in the \uicontrol {Layout direction} field. By setting
properties can be combined to produce a variety of layouts. values for these properties, you can produce a variety of layouts.
\image qtquick-designer-listview-properties.png "List View properties" \image qtquick-designer-listview-properties.png "List View properties"
@@ -100,8 +105,8 @@
and the cache is set to 40, then up to six delegates above and below the and the cache is set to 40, then up to six delegates above and below the
visible area may be created or retained. The cached delegates are created visible area may be created or retained. The cached delegates are created
asynchronously, allowing creation to occur across multiple frames and asynchronously, allowing creation to occur across multiple frames and
reducing the likelihood of skipping frames. In order to improve painting reducing the likelihood of skipping frames. To improve painting performance,
performance delegates outside the visible area are not painted. delegates outside the visible area are not painted.
The default value of this property is platform dependent, but will usually The default value of this property is platform dependent, but will usually
be a value greater than zero. Negative values are ignored. be a value greater than zero. Negative values are ignored.
@@ -118,6 +123,11 @@
\section1 View Highlight \section1 View Highlight
In the \uicontrol {List View Highlight} and \uicontrol {Grid View Highlight}
sections, you can specify properties for highlighting items in views.
\image qtquick-designer-listview-highlight-properties.png "List View Highlight properties"
The current item in a list or grid view is higlighted if you set The current item in a list or grid view is higlighted if you set
the value of the \uicontrol Range field to \uicontrol ApplyRange the value of the \uicontrol Range field to \uicontrol ApplyRange
or \uicontrol StrictlyEnforceRange. When you select to apply the or \uicontrol StrictlyEnforceRange. When you select to apply the
@@ -137,12 +147,12 @@
current item is in the middle of the view. The begin value must be less than current item is in the middle of the view. The begin value must be less than
the end value. the end value.
Select the \uicontrol {Follows current item} check box to enable the view to Select the \uicontrol {Follows current} check box to enable the view to
manage the highlight. The highlight is moved smoothly to follow the current manage the highlight. The highlight is moved smoothly to follow the current
item. Otherwise, the highlight is not moved by the view, and any movement item. Otherwise, the highlight is not moved by the view, and any movement
must be implemented by the highlight. must be implemented by the highlight.
The values of the \uicontrol {Move duration}, \uicontrol {Move velocity} The values of the \uicontrol {Move duration}, \uicontrol {Move velocity},
\uicontrol {Resize duration}, and \uicontrol {Resize velocity} fields \uicontrol {Resize duration}, and \uicontrol {Resize velocity} fields
control the speed of the move and resize animations for the highlight. control the speed of the move and resize animations for the highlight.
@@ -186,9 +196,9 @@
\section1 Summary of Model Components \section1 Summary of Model Components
The following table lists the components that you can use to add data models The following table lists the components that you can use to add data models
to UIs. The \e Location column contains the tab name where you can find the to UIs. The \e Location column indicates the location of the component in
component in \l Library > \uicontrol Components. The \e MCU column indicates \l Library > \uicontrol Components. The \e MCU column indicates which
which components are supported on MCUs. components are supported on MCUs.
\table \table
\header \header

View File

@@ -28,10 +28,11 @@
\section1 Path View \section1 Path View
The Path View component lays out data provided by data models on a \l{Path}. A \uicontrol {Path View} component lays out data provided by data models
on a \l{Path}.
A graphical spline editor enables you to specify path view paths, which A graphical spline editor enables you to specify path view paths, which
is a non-trivial task to do in the code editor. is a non-trivial task to do in \uicontrol {Text Editor}.
\image qmldesigner-pathview-editor.png "Path View editor" \image qmldesigner-pathview-editor.png "Path View editor"
@@ -52,7 +53,7 @@
To add intermediary points to a curve segment, select \uicontrol {Split Segment} To add intermediary points to a curve segment, select \uicontrol {Split Segment}
in the context menu. in the context menu.
In the \uicontrol Properties view, you can specify other properties for In the \uicontrol {Path View} section, you can specify other properties for
the path view. The value of the \uicontrol {Drag margin} field specifies the path view. The value of the \uicontrol {Drag margin} field specifies
the maximum distance from the path that initiates mouse dragging. the maximum distance from the path that initiates mouse dragging.
@@ -67,6 +68,9 @@
0 to the value of the \uicontrol {Item count} field, which displays the 0 to the value of the \uicontrol {Item count} field, which displays the
number of items in the model. number of items in the model.
In the \uicontrol {Path View Highlight} section, you can specify properties
for \l{View Highlight}{highlighting} path objects.
\if defined(qtdesignstudio) \if defined(qtdesignstudio)
\note You can also use the \l {SVG Path Item} Studio Component to specify an \note You can also use the \l {SVG Path Item} Studio Component to specify an
SVG path data string that draws a path. SVG path data string that draws a path.
@@ -81,14 +85,17 @@
The \uicontrol {SVG Path Item} component uses an SVG path data string to The \uicontrol {SVG Path Item} component uses an SVG path data string to
draw a path as a line. draw a path as a line.
Setting path colors is described in \l {Picking Colors}.
The stroke property values that specify the appearance of the path are The stroke property values that specify the appearance of the path are
described in \l{Strokes}. described in \l{Strokes}.
\image studio-svgpath-properties.png "Svg Path properties" \image studio-svgpath-properties.png "SVG Path Item properties"
The \uicontrol {Path data} field contains the SVG path data The \uicontrol {Path data} field in the \uicontrol {Path Info} section
string that specifies the path. For more information, see contains the SVG path data string that specifies the path. For more
\l{https://www.w3.org/TR/SVG/paths.html#PathData}{W3C SVG Path Data}. information, see \l{https://www.w3.org/TR/SVG/paths.html#PathData}
{W3C SVG Path Data}.
//! [svgpath] //! [svgpath]
*/ */

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 23 KiB