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
A list view organizes components as a list, whereas a 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.
Create instances of \uicontrol {List View} and \uicontrol {Grid View}
components to organize other component instances in list or grid format.
They are available in \l Library > \uicontrol Components >
\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
field and the grid view flow in the \uicontrol Flow field. You can change
the layout direction in the \uicontrol {Layout direction} field. These
properties can be combined to produce a variety of layouts.
the layout direction in the \uicontrol {Layout direction} field. By setting
values for these properties, you can produce a variety of layouts.
\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
visible area may be created or retained. The cached delegates are created
asynchronously, allowing creation to occur across multiple frames and
reducing the likelihood of skipping frames. In order to improve painting
performance delegates outside the visible area are not painted.
reducing the likelihood of skipping frames. To improve painting performance,
delegates outside the visible area are not painted.
The default value of this property is platform dependent, but will usually
be a value greater than zero. Negative values are ignored.
@@ -118,6 +123,11 @@
\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 value of the \uicontrol Range field to \uicontrol ApplyRange
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
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
item. Otherwise, the highlight is not moved by the view, and any movement
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
control the speed of the move and resize animations for the highlight.
@@ -186,9 +196,9 @@
\section1 Summary of Model Components
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
component in \l Library > \uicontrol Components. The \e MCU column indicates
which components are supported on MCUs.
to UIs. The \e Location column indicates the location of the component in
\l Library > \uicontrol Components. The \e MCU column indicates which
components are supported on MCUs.
\table
\header

View File

@@ -28,10 +28,11 @@
\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
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"
@@ -52,7 +53,7 @@
To add intermediary points to a curve segment, select \uicontrol {Split Segment}
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 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
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)
\note You can also use the \l {SVG Path Item} Studio Component to specify an
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
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
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
string that specifies the path. For more information, see
\l{https://www.w3.org/TR/SVG/paths.html#PathData}{W3C SVG Path Data}.
The \uicontrol {Path data} field in the \uicontrol {Path Info} section
contains the SVG path data string that specifies the path. For more
information, see \l{https://www.w3.org/TR/SVG/paths.html#PathData}
{W3C SVG Path Data}.
//! [svgpath]
*/

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 23 KiB