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>
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 16 KiB |
@@ -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
|
||||
|
@@ -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]
|
||||
*/
|
||||
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 23 KiB |