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
|
\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
|
||||||
|
@@ -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]
|
||||||
*/
|
*/
|
||||||
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 23 KiB |