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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
|
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** 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. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
/*!
\page quick-controls.html
\previouspage quick-images.html
\nextpage quick-data-models.html
\title User Interaction Methods
You can use a set of basic QML types to add interaction methods to UIs,
such as performing actions by using a pointing device or the keyboard,
or flicking the visible area of the screen horizontally or vertically.
Further, you can use \l{Qt Quick Controls} types to inform users about
the progress of the application or to gather input from users.
\image qtquick-designer-qtquickcontrols-types.png "Qt Quick Controls 2 types in Library"
The following types of controls are available for user interaction:
\list
\li \l {Button Controls}
\li \l {Indicators}
\li \l {Selectors}
\li \l {Tab Bar}
\li \l {Tool Bar}
\li \l {Summary of User Interaction Methods}
\endlist
You can specify values for the properties of components in the
\uicontrol Properties view. Some properties are common to all components,
whereas some are common to particular types of controls. Some properties
are only available for a particular component. The following sections
describe the basic interaction methods, the controls, and their properties.
\section1 Basic Interaction Methods
Users can interact with applications by using pointing devices or the
keyboard. If the content does not fit the visible area of the screen,
it can be flicked horizontally or vertically.
\section2 Mouse Area
QML uses signals and handlers to deliver mouse interactions. Specifically,
Qt Quick provides a \uicontrol {Mouse Area} type that developers can use to
define JavaScript callbacks (also called signal handlers), which accept
mouse events within a defined area.
A mouse area receives events within a defined area. One quick way to define
this area is to \l{Setting Anchors and Margins}{anchor} the mouse area to
its parent's area. If the parent is a \l Rectangle (or any component that
is derived from an \l Item), the mouse area will fill the area defined by
the parent's dimensions. Alternatively, you can define an area smaller or
larger than the parent. Several controls,such as buttons, contain a mouse
area.
A mouse area emits \l{Connecting Objects to Signals}{signals} in response
to different mouse events:
\list
\li \c canceled()
\li \c clicked()
\li \c doubleClicked()
\li \c entered()
\li \c exited()
\li \c positionChanged()
\li \c pressAndHold()
\li \c pressed()
\li \c released()
\endlist
\if defined(qtcreator)
A more modern way of handling events from all pointing devices, including
mouse and touchscreen, is via \l {Qt Quick Input Handlers}.
\endif
\section2 Focus Scope
When a key is pressed or released, a key event is generated and delivered
to the focused component. If no component has active focus, the key event
is ignored. If the component with active focus accepts the key event,
propagation stops. Otherwise the event is sent to the component's parent
until the event is accepted, or the root item is reached and the event is
ignored.
A component has focus when the \uicontrol Focus property in the
\uicontrol Advanced tab is set to \c true. However, for reusable
or imported components, this is not sufficient, and you should use
a \uicontrol {Focus Scope} type.
Within each focus scope, one object may have focus enabled. If more
than one component have it enabled, the last component to enable it
will have the focus and the others are unset, similarly to when there
are no focus scopes.
When a focus scope receives active focus, the contained type with
focus set (if any) also gets the active focus. If this type is
also a focus scope, both the focus scope and the sub-focused item
will have active focus.
The \uicontrol {Focus Scope} type is not a visual type, and therefore the
properties of its children need to be exposed to the parent item of the
focus scope. \l{Using Layouts}{Layouts} and \l{Using Positioners}
{positioners} will use these visual and styling properties to create the
layout.
For more information, see \l {Keyboard Focus in Qt Quick}.
\section2 Flickable
\uicontrol Flickable places its children on a surface that can be dragged
and flicked, causing the view onto the child items to scroll. This
behavior forms the basis of components that are designed to show large
numbers of child items, such as \uicontrol {List View} and
\uicontrol {Grid View}. For more information, see \l{List and Grid Views}.
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.
The contents of a flickable component are not automatically clipped. If
the component is not used as a full-screen item, consider selecting the
\uicontrol Clip check box in the \uicontrol Visibility section.
\image qtquick-designer-flickable-properties.png "Flickable properties"
Users can interact with a flickable component if the \uicontrol Interactive
property is set to \c true. Set it to \c false to temporarily disable
flicking. This enables special interaction with the components children.
For example, you might want to freeze a flickable map while scrolling
through a pop-up that is a child of the Flickable.
The \uicontrol {Flick direction} field determines whether the view can be
flicked horizontally or vertically. Select \uicontrol AutoFlickDirection
to enable flicking vertically if the content height is not equal to height
of the flickable and horizontally if the content width is not equal
to the width of the flickable. Select \uicontrol AutoFlickIfNeeded if
the content height or width is greater than that of the flickable.
Specify the maximum velocity for flicking the view in pixels per second in
the \uicontrol {Max. velocity} field. Specify the rate at which a flick
will decelerate in the \uicontrol Decelerate field.
The \uicontrol {Bounds movement} property determines whether the flickable
will give a feeling that the edges of the view are soft, rather than a hard
physical boundary. Select \uicontrol StopAtBounds for custom edge effects
where the contents do not follow drags or flicks beyond the bounds of the
flickable. Select \uicontrol FollowBoundsBehavior to have the contents
follow drags or flicks beyond the bounds of the flickable depending on the
value of the \uicontrol Behavior field.
In the \uicontrol {Press delay} field, specify the time in milliseconds
to delay delivering a press to children of a flickable. This can be useful
when reacting to a press before a flicking action has undesirable effects.
If the flickable is dragged or flicked before the delay times out,
the press event will not be delivered. If the button is released
within the timeout, both the press and release will be delivered.
\note For nested flickables with press delay set, the press delay of
outer flickables is overridden by the innermost flickable. If the drag
exceeds the platform drag threshold, the press event will be delivered
regardless of this property.
The \uicontrol {Pixel aligned} property sets the alignment of
\uicontrol {Content X} and \uicontrol {Content Y} to pixels (\c true)
or subpixels (\c false). Enable it to optimize for still content or
moving content with high constrast edges, such as one-pixel-wide lines,
text, or vector graphics. Disable this property when optimizing for
animation quality.
If \uicontrol {Synchronous drag} is set to \c true, then when the mouse or
touchpoint moves far enough to begin dragging the content, the content will
jump, so that the content pixel which was under the cursor or touchpoint
when pressed remains under that point. The default is \c false, which
provides a smoother experience (no jump) at the cost of losing some of the
drag distance at the beginning.
The \uicontrol {Content size} field specifies the dimensions of the
surface controlled by a flickable. Typically, set the values of the
\uicontrol W and \uicontrol H fields to the combined size of the items
placed in the flickable. You can set additional margins around the
content in the \uicontrol Margins field.
The \uicontrol Origin field specifies the origin of the content. It
refers to the top-left position of the content regardless of layout
direction. Usually, the \uicontrol X and \uicontrol Y are set to 0.
However, a \l{ListView}{List View} and \l {GridView}{Grid View}
may have an arbitrary origin due to delegate size variation, or item
insertion or removal outside the visible region.
\section1 General Control Properties
You can set control properties in the \uicontrol Properties view.
\image qtquick-designer-control-properties.png "Control section in Properties"
The \uicontrol Enabled check box indicates whether the control is enabled.
The value of the \uicontrol {Focus policy} field determines whether the
control accepts focus by tabbing, clicking, and using the mouse wheel.
Select the \uicontrol Hover and \uicontrol Wheel check boxes to enable the
control to accept mouse events. The hover value is propagated to all child
components, unless it has been explicitly set for them.
\note Take care when enabling wheel events for controls within scrollable
items, such as \l Flickable, because the control will consume the
events, and therefore interrupt scrolling of the flickable.
\uicontrol Spacing is useful for controls that have multiple or repetitive
building blocks. For example, some \l{Styling Controls}{styles} use spacing
to determine the distance between the text and indicator of a
\l {Check Box}. Spacing is not enforced by the controls, so each style may
interpret it differently, and some may ignore it altogether.
\section1 Button Controls
Qt Quick Controls offer a selection of button-like controls for specific
use cases. The following sections contain guidelines for choosing the button
most suitable for a use case and discuss the values you can set for button
properties in the \uicontrol Properties view.
\image qtquick-designer-button-types.png "Button controls in Form Editor"
Recommendations for buttons that contain text:
\list
\li Keep labels short and concise.
\li Use the default font unless you have UI guidelines specifying
otherwise.
\li If the text is localized, consider how a longer text affects the
layout.
\endlist
For more information about setting text properties, see \l Fonts and
\l Padding.
The properties that are shared by all button controls are described in:
\list
\li \l {Displaying Text and Icons}
\li \l {Checking Buttons}
\li \l {Button Signals}
\endlist
\section2 Button
\image qtquickcontrols2-button.gif "Button"
\uicontrol Button can be pushed or clicked by users. Typically, buttons
are used to perform an action or to answer a question. For example, \e OK,
\e Apply, \e Cancel, \e Close, \e Yes, \e No, and \e Help.
The button text should be a verb describing the action, or a noun matching
the title of the popup that will be opened.
Don't use a button to set state, because a \l Switch is more suitable for
that purpose.
Select the \uicontrol Highlighted check box to draw the users' attention
towards a button. Highlighting a button has no effect on keyboard
interaction.
\image qtquickcontrols2-button-highlighted.gif "Highlighted button"
A flat button typically does not draw a background unless it is pressed or
checked. To create a flat button, select the \uicontrol Flat check box.
\image qtquickcontrols2-button-flat.gif "Flat button"
\section2 Delay Button
\image qtquickcontrols2-delaybutton.gif "Delay button"
\uicontrol {Delay Button} incorporates a delay before triggering an action.
This delay prevents accidental presses.
Use delay buttons in touch user interfaces and for actions that must be
triggered with care.
You can set the delay in milliseconds in the \uicontrol Delay field.
\section2 Check Box
\image qtquickcontrols2-checkbox.gif "Check box"
\uicontrol {Check Box} presents an option button that can be toggled on
(checked) or off (unchecked). Check boxes are typically used to select
one or more options from a set of options. For larger sets of options,
such as those in a list, consider using \uicontrol {Check Delegate} instead.
\image qtquickcontrols2-checkdelegate.gif "Check delegate"
Use check boxes to build multi-selection option lists, where any number
of options can be selected, including none, but the options are not
mutually exclusive.
Use a single check box for a yes/no choice, such as when users have to
accept the terms of service agreement in a dialog. For a single yes/no
choice, you can also use a \l Switch. If users are choosing between options,
use a check box. If they are choosing between actions to be taken, a switch
is recommended.
The value of the \uicontrol Checked property determines the state of the
check box. However, in addition to the checked and unchecked states, a
check box has a third state: \e {partially checked}.
Select the \uicontrol Tri-state check box to enable the check box to cycle
between checked, partially checked, and unchecked states when users
toggle it by using touch, mouse, or keyboard.
\image qtquickcontrols2-checkbox-tristate.gif "Tri-state check box"
When options can be grouped, you can use a partially checked check box to
represent the whole group. Select \uicontrol PartiallyChecked in the
\uicontrol {Check state} field to indicate that users selected some
sub-items in the group, but not all of them.
The checkable options are often listed vertically.
The check box label should be a statement that the check mark makes true,
and that the absence of a check mark makes false. Therefore, the check box
label should not contain a negative statement.
\section2 Radio Button
\image qtquickcontrols2-radiobutton.gif "Radio button"
\uicontrol {Radio Button} is an option button that can be toggled on
(checked) or off (unchecked). Radio buttons are typically used to select
one option from a set of options. Selecting an option automatically clears
the previous selection.
If there are only two mutually exclusive options, combine them into a single
\l {Check Box} or a \l Switch.
\uicontrol {Radio Delegate} is similar to radio button, except that it is
typically used in views.
\image qtquickcontrols2-radiodelegate.gif "Radio delegate"
Recommendations for radio buttons:
\list
\li Limit the label text to one line.
\li Ensure that a sensible default option is checked.
\li List radio button options vertically.
\li Keep the list short.
\li In order to avoid confusion, do not put two groups of radio buttons
next to each other.
\endlist
\section2 Switch
\image qtquickcontrols2-switch.gif "Switch"
\uicontrol Switch is an option button that can be dragged or toggled on
(checked) or off (unchecked). Switches are typically used to select between
two states: \e on or \e off. For larger sets of options, such as those in a
list, consider using \uicontrol {Switch Delegate} instead.
\image qtquickcontrols2-switchdelegate.gif "Switch delegate"
Use a switch for binary operations that take effect immediately after the
switch is toggled. For example, use a switch to turn WiFi on or off.
\section2 Round Button
\uicontrol {Round Button} is a clickable control that starts an action,
or opens or closes a popup. A round button with a square image icon or
one-letter font icon is circular. A circular round button takes less space
than a normal button, and can also be used as a floating action button.
A round button has the same properties as a \l Button.
\section2 Displaying Text and Icons
A button can contain text, an icon, or both. Specify the button text in
the \uicontrol Text field. The value of the \uicontrol Display field
determines whether only text or an icon is displayed, or when both are
visible, whether the text is placed beside the icon or under it.
\image qtquick-designer-abstract-button-properties.png "General button properties"
\section2 Checking Buttons
A \e checkable button toggles between checked (on) and unchecked (off) when
users click on it or press the space bar while the button has active
focus. Select the \uicontrol Checkable check box to make a button checkable.
To make the button checked, select the \uicontrol Checked check box.
Buttons that belong to the same parent item can be mutually exclusive.
Users can click a button to check it, and the previous selection is
cleared. Users cannot uncheck the currently checked button by clicking
it. Instead, they must click another button in the group to set the new
checked button for that group.
Radio buttons and tab buttons are mutually exclusive by default. To make
other types of buttons mutually exclusive, select the \uicontrol Exclusive
check box.
If the buttons don't belong to the same parent, checking and unchecking
buttons does not affect the other buttons in the group.
\section2 Button Signals
A button emits the \c clicked() signal when it is activated by users.
\l{Connecting Objects to Signals}{Connect to this signal} to perform
the button's action. Buttons provide the following additional signals:
\c canceled(), \c doubleClicked(), \c pressed(), \c released(), and
\c pressAndHold() for long presses.
Select the \uicontrol Auto-repeat check box to repeat the \c pressed(),
\c released(), and \c clicked() signals while the button is pressed and
held down. The \c pressAndHold() signal will not be emitted.
\section1 Indicators
Qt Quick Controls offer a selection of indicator-like controls, such as
busy indicator, page indicator, and progress bar, for specific use cases.
The following sections contain guidelines for choosing the indicator most
suitable for a use case.
\image qtquick-designer-indicator-types.png "Indicator types"
\section2 Busy Indicator
\image qtquickcontrols2-busyindicator.gif "Busy indicator"
\uicontrol {Busy Indicator} indicates that an operation is in progress, and
that the UI has to wait for the operation to complete.
A busy indicator is similar to an indeterminate \l {Progress Bar}. Both can
be used to indicate background activity. The main difference is visual, and
that a progress bar can also present a concrete amount of progress (when it
can be determined). Due to the visual difference, busy indicators and
indeterminate progress bars fit in different places in UIs.
Select the \uicontrol Running check box to make the busy indicator visible.
Typical places for a busy indicator are:
\list
\li In the corner of a \uicontrol {Tool Bar}
\li As an overlay on top of a \uicontrol Page
\li On the side of an \uicontrol {Item Delegate}
\endlist
\section2 Page Indicator
\uicontrol {Page Indicator} is used to indicate the currently active page
in a container of multiple pages. Specify the number of pages in the
\uicontrol Count field. Select the current page in the \uicontrol Current
field.
\section2 Progress Bar
\image qtquickcontrols2-progressbar.gif "Progress bar"
\uicontrol {Progress Bar} indicates the progress of an operation. You
can specify the initial value in the \uicontrol Value field, but it
should be updated regularly. Specify the range in the \uicontrol From
and \uicontrol To fields, which can both contain any value.
\image qtquick-designer-progressbar-properties.png "Progress Bar properties"
Select the \uicontrol Indeterminate check box when unable to determine the
size of the item being downloaded, or if the download progress might get
interrupted due to a network failure.
\image qtquickcontrols2-progressbar-indeterminate.gif
The indeterminate mode is similar to a \l {Busy Indicator} in that both can
be used to indicate background activity. Due to their visual differences,
indeterminate progress bars and busy indicators fit in different places in
UIs.
Typical places for an indeterminate progress bar are:
\list
\li At the bottom of a \uicontrol {Tool Bar}
\li Inline within the content of a \uicontrol Page
\li In an \uicontrol {Item Delegate} to show the progress
of a particular item
\endlist
\section1 Selectors
Qt Quick Controls offers a set of selector-like controls, such as sliders,
dial, sping box, combo box, and tumbler, for specific use cases. The
following sections contain guidelines for choosing the selector most
suitable for a use case.
\image qtquick-designer-selector-types.png "Selector types"
\section2 Slider and Dial
\image qtquickcontrols2-slider.gif "Slider"
\uicontrol Slider is used to select a value by sliding a handle along a
track, whereas \uicontrol {Range Slider} is used to select a range
specified by two values, by sliding each handle along a track.
\image qtquickcontrols2-rangeslider.gif "Range slider"
\uicontrol Dial is similar to a traditional dial knob that is found on
devices such as stereos or industrial equipment. It allows users to
specify a value within a range.
\image qtquickcontrols2-dial-no-wrap.gif "Dial"
In the \uicontrol From and \uicontrol To fields, set the range of the
slider or dial. Set the value of the slide handle or dial in the
\uicontrol Value field. For a range slider, set the initial positions
of the first and second handles in the \uicontrol {First value} and
\uicontrol {Second value} fields.
\image qtquick-designer-range-slider-properties.png "Range slider properties"
In the \uicontrol {Snap mode} field, set how the slider handles or dial
behave with regards to the value of the \uicontrol {Step size} field. By
default, they do not snap to step size, but you can set them to snap to it
either while being dragged or after being released.
Select the \uicontrol Live check box to provide live updates of the value
properties.
You can set slider orientation to horizontal or vertical in the
\uicontrol Orientation field.
A dial supports circular, horizontal, and vertical input modes. For
applications where fast input is important, the circular input mode is
useful, as clicking the dial will move it directly to that position.
For applications where precise input is important, the horizontal and
vertical input modes are recommended, as these allow small adjustments to
be made relative to where the dial is clicked. These modes are also better
for dials where large jumps in values could be unsafe, such as a dial that
controls audio volume. Set the input mode in the \uicontrol {Input mode}
field.
\image qtquick-designer-dial-properties.png "Dial properties"
\section2 Spin Box
\image qtquickcontrols2-spinbox.png "Spin Box"
\uicontrol {Spin box} enables users to choose an integer value by clicking
the up or down indicator buttons, or by pressing up or down on the keyboard.
Select the \uicontrol Editable check box to enable users to enter a text
value in the input field.
The other spin box properties are similar to those of a dial.
\section2 Combo Box
\image qtquickcontrols2-combobox.gif "Combo box"
\uicontrol {Combo Box} is a combined button and popup list. It provides a
means of presenting a list of options to users in a way that takes up the
minimum amount of screen space.
A combo box is used to select a value from a static multiple-line drop-down
list. Users cannot add new values, and only one option can be selected.
Combo box values are provided by a \l{Lists and Other Data Models}
{data model}. The data model is usually a JavaScript array, a \l ListModel,
or an integer, but other types of data models are also supported.
Select the \uicontrol Editable check box to auto-complete combo box text
based on what is available in the model.
\image qtquick-designer-combobox-properties.png "Combo box properties"
When using models that have multiple named roles, specify the role of
the \uicontrol {Display text} property in the \uicontrol {Text role} field.
To use a role of the model item that corresponds to the text role, enter
\c valueRole in the field.
The \uicontrol Current property is the index of the current item in the
combo box. The default value is \c -1 when the combo box is empty, and
\c 0 otherwise.
A flat combo box does not draw a background unless it is
interacted with, which makes it blend into the UI. Use flat combo
boxes on a tool bar, for example, to match the flat look of tool
buttons. To create a flat combo box, select the \uicontrol Flat
check box.
Recommendations for combo boxes:
\list
\li If the number of values very large, consider applying a filter.
\li If the number of values is small, consider using \l {Radio Button},
so that users can see all options at the same time.
\li Set a default value, which should be the value that you expect
to be chosen most often.
\endlist
\section2 Tumbler
\image qtquickcontrols2-tumbler-wrap.gif
\uicontrol Tumbler allows users to select an option from a spinnable
\e wheel of items. It is useful when there are too many options to use, for
example, a \l {Radio Button}, and too few options to require the use of an
editable \l {Spin Box}. It is convenient in that it requires no keyboard
usage and wraps around at each end when there are a large number of items.
Specify the number of visible options in the \uicontrol {Visible count}
field. Select the index of the current option in the \uicontrol Current
field.
\image qtquick-designer-tumbler-properties.png "Tumbler properties"
To enable wrapping, select the \uicontrol Wrap check box.
\section1 Tab Bar
\image qtquickcontrols2-tabbar.gif "Tab Bar"
\uicontrol {Tab Bar} provides a tab-based navigation model, where users
can switch between different views or subtasks. A tab bar is commonly
used as a header or footer of an \l ApplicationWindow. Select the toolbar
position in the \uicontrol Position field.
Typically, a tab bar contains a static set of \uicontrol {Tab Button}
controls that are defined as its children. The \uicontrol Current
field shows the index of the current tab button. The default value is
\c -1 when the tab bar is empty, and \c 0 otherwise.
\image qtquick-designer-tabbar-properties.png "Tab Bar properties"
You can specify content size in the \uicontrol {Content width} and
\uicontrol {Content height} fields.
If the total width of the buttons exceeds the available width of the tab
bar, it automatically becomes \l{Flickable}{flickable}.
\image qtquickcontrols2-tabbar-flickable.png
\section1 Tool Bar
\image qtquickcontrols2-toolbar.png
\uicontrol {Tool Bar} contains application-wide and context-sensitive
actions and controls, such as navigation buttons and search fields. A
tool bar is commonly used as a header or footer of an \l ApplicationWindow.
Select the toolbar position in the \uicontrol Position field.
\image qtquick-designer-toolbar-properties.png "Tool Bar properties"
\uicontrol {Tool Button} is nearly identical to \l Button, but it has a
graphical appearance that makes it more suitable for insertion into a
tool bar.
A tool bar does not provide a layout of its own, but requires you to
position its contents, for instance by creating a \l RowLayout. If the
tool bar contains only one item, it will resize to fit the implicit item
size. This makes a tool bar particularly suitable for use together with
\l{Using Layouts}{layouts}. However, you can specify content size in the
\uicontrol {Content width} and \uicontrol {Content height} fields.
\uicontrol {Tool Separator} is used to visually distinguish between
groups of items on a tool bar by separating them with a line. It can
be used in horizontal or vertical toolbars by setting the value of
the \uicontrol Orientation field.
\section1 Summary of User Interaction Methods
The following table lists the QML types that you can use to add interaction
methods to UIs. The \e Location column contains the tab name where you can
find the type in \uicontrol Library. The \e MCU column indicates which types
are supported on MCUs.
\table
\header
\li Icon
\li Name
\li Location
\li MCU
\li Purpose
\row
\li \inlineimage icons/busyindicator-icon16.png
\li \l [QtQuickControls]{BusyIndicator}{Busy Indicator}
\li Qt Quick - Controls 2
\li
\li Indicates activity while content is being loaded.
\row
\li \inlineimage icons/button-icon16.png
\li \l [QtQuickControls]{Button}
\li Qt Quick - Controls 2
\li \inlineimage ok
\li A push button that you can associate with an action.
\row
\li \inlineimage icons/checkbox-icon16.png
\li \l [QtQuickControls]{CheckBox}{Check Box}
\li Qt Quick - Controls 2
\li \inlineimage ok
\li An option button that can be toggled on (checked) or off
(unchecked).
\row
\li \inlineimage icons/checkbox-icon16.png
\li \l [QtQuickControls]{CheckDelegate}{Check Delegate}
\li Qt Quick - Controls 2
\li
\li An item delegate that can be toggled on (checked) or off
(unchecked).
\row
\li \inlineimage icons/combobox-icon16.png
\li \l [QtQuickControls]{ComboBox}{Combo Box}
\li Qt Quick - Controls 2
\li
\li A combined button and popup list that is populated by using a data
model.
\row
\li \inlineimage icons/delaybutton-icon16.png
\li \l [QtQuickControls]{DelayButton}{Delay Button}
\li Qt Quick - Controls 2
\li
\li An option button that is triggered when held down long enough.
\row
\li \inlineimage icons/dial-icon16.png
\li \l [QtQuickControls]{Dial}
\li Qt Quick - Controls 2
\li \inlineimage ok
\li A circular dial that is rotated to set a value.
\row
\li \inlineimage flickable-icon16.png
\li \l [QML]{Flickable}
\li Qt Quick - Basic
\li \inlineimage ok
\li Items can be flicked horizontally or vertically.
\row
\li \inlineimage focusscope-icon16.png
\li \l{FocusScope}{Focus Scope}
\li Qt Quick - Basic
\li
\li Assists in keyboard focus handling when building reusable QML
components.
\row
\li \inlineimage mouse-area-icon16.png
\li \l [QtQuick]{MouseArea}{Mouse Area}
\li Qt Quick - Basic
\li \inlineimage ok
\li Enables simple mouse handling.
\row
\li \inlineimage icons/pageindicator-icon16.png
\li \l [QtQuickControls]{PageIndicator}{Page Indicator}
\li Qt Quick - Controls 2
\li
\li Indicates the indicate the currently active page in a container of
multiple pages.
\row
\li \inlineimage icons/progressbar-icon16.png
\li \l [QtQuickControls]{ProgressBar}{Progress Bar}
\li Qt Quick - Controls 2
\li \inlineimage ok
\li Indicates the progress of an operation.
\row
\li \inlineimage icons/radiobutton-icon16.png
\li \l [QtQuickControls]{RadioButton}{Radio Button}
\li Qt Quick - Controls 2
\li \inlineimage ok
\li An option button that can be switched on (checked) or off
(unchecked).
\row
\li \inlineimage icons/radiobutton-icon16.png
\li \l [QtQuickControls]{RadioDelegate}{Radio Delegate}
\li Qt Quick - Controls 2
\li
\li An item delegate that can be toggled on (checked) or off
(unchecked).
\row
\li \inlineimage icons/rangeslider-icon16.png
\li \l [QtQuickControls]{RangeSlider}{Range Slider}
\li Qt Quick - Controls 2
\li
\li Enables users to select a range of values by sliding two handles
along a track.
\row
\li \inlineimage icons/roundbutton-icon16.png
\li \l [QtQuickControls]{RoundButton}{Round Button}
\li Qt Quick - Controls 2
\li
\li A push button with rounded corners that you can associate with an
action.
\row
\li \inlineimage icons/slider-icon16.png
\li \l [QtQuickControls]{Slider}
\li Qt Quick - Controls 2
\li \inlineimage ok
\li Enables users to select a value by sliding a handle along a track.
\row
\li \inlineimage icons/spinbox-icon16.png
\li \l [QtQuickControls]{SpinBox}{Spin Box}
\li Qt Quick - Controls 2
\li
\li Enables users to specify a value by clicking the up or down buttons,
by pressing up or down on the keyboard, or by entering a value in
the box.
\row
\li \inlineimage icons/switch-icon16.png
\li \l [QtQuickControls]{Switch}
\li Qt Quick - Controls 2
\li \inlineimage ok
\li An option button that can be toggled on or off.
\row
\li \inlineimage icons/switch-icon16.png
\li \l [QtQuickControls]{SwitchDelegate}{Switch Delegate}
\li Qt Quick - Controls 2
\li
\li An item delegate with a switch indicator that can be toggled on or
off.
\row
\li \inlineimage icons/toolbar-icon16.png
\li \l [QtQuickControls] {TabBar}{Tab Bar}
\li Qt Quick - Controls 2
\li
\li Enables users to switch between different views or subtasks.
\row
\li \inlineimage icons/toolbutton-icon16.png
\li \l [QtQuickControls]{TabButton}{Tab Button}
\li Qt Quick - Controls 2
\li
\li A button that is functionally similar to \uicontrol Button, but
provides a look that is more suitable for a \uicontrol {Tab Bar}.
\row
\li \inlineimage icons/toolbar-icon16.png
\li \l [QtQuickControls]{ToolBar}{Tool Bar}
\li Qt Quick - Controls 2
\li
\li A container of application-wide and context sensitive actions and
controls, such as navigation buttons and search fields.
\row
\li \inlineimage icons/toolbutton-icon16.png
\li \l [QtQuickControls]{ToolButton}{Tool Button}
\li Qt Quick - Controls 2
\li
\li A button that is functionally similar to \uicontrol Button, but
provides a look that is more suitable for a \uicontrol {Tool Bar}.
\row
\li \inlineimage icons/toolseparator-icon16.png
\li \l [QtQuickControls]{ToolSeparator}{Tool Separator}
\li Qt Quick - Controls 2
\li
\li Separates a group of items from adjacent items on a
\uicontrol {Tool Bar}.
\row
\li \inlineimage icons/tumbler-icon16.png
\li \l [QtQuickControls]{Tumbler}
\li Qt Quick - Controls 2
\li
\li A spinnable wheel of items that can be selected.
\endtable
*/
|