| accessible |
|
|
- |
| CMakeLists.txt |
|
8656 |
- |
| configure.cmake |
|
1200 |
- |
| doc |
|
|
- |
| qquickabstractbutton.cpp |
!
\qmltype AbstractButton
\inherits Control
//! \nativetype QQuickAbstractButton
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-buttons
\brief Abstract base type providing functionality common to buttons.
AbstractButton provides the interface for controls with button-like
behavior; for example, push buttons and checkable controls like
radio buttons and check boxes. As an abstract control, it has no delegate
implementations, leaving them to the types that derive from it.
\sa ButtonGroup, {Button Controls}
|
45286 |
- |
| qquickabstractbutton_p.h |
|
6542 |
- |
| qquickabstractbutton_p_p.h |
|
4132 |
- |
| qquickabstractspinbox_p.h |
|
20062 |
- |
| qquickaction.cpp |
!
\qmltype Action
\inherits QtObject
//! \nativetype QQuickAction
\inqmlmodule QtQuick.Controls
\since 5.10
\ingroup utilities
\brief Abstract user interface action.
Action represents an abstract user interface action that can have shortcuts
and can be assigned to menu items and toolbar buttons.
Actions may contain \l text, an \l icon, and a \l shortcut. Actions are normally
\l triggered by the user via menu items, toolbar buttons, or keyboard shortcuts.
A \l checkable Action toggles its \l checked state when triggered.
\snippet qtquickcontrols-action.qml action
Action is commonly used to implement application commands that can be invoked
via menu items, toolbar buttons, and keyboard shortcuts. Since the user expects
the commands to be performed in the same way, regardless of the user interface
used, it is useful to represent the commands as shareable actions.
Action can be also used to separate the logic and the visual presentation. For
example, when declaring buttons and menu items in \c .ui.qml files, actions can
be declared elsewhere and assigned from the outside.
\snippet qtquickcontrols-action.qml toolbutton
When an action is paired with buttons and menu items, the \c enabled, \c checkable,
and \c checked states are synced automatically. For example, in a word processor,
if the user clicks a "Bold" toolbar button, the "Bold" menu item will automatically
be checked. Buttons and menu items get their \c text and \c icon from the action by
default. An action-specific \c text or \c icon can be overridden for a specific
control by specifying \c text or \c icon directly on the control.
\snippet qtquickcontrols-action.qml menuitem
Since Action presents a user interface action, it is intended to be assigned to
a \l MenuItem, \l ToolButton, or any other control that inherits \l AbstractButton.
For keyboard shortcuts, the simpler \l Shortcut type is more appropriate.
\sa MenuItem, ToolButton, Shortcut
|
17067 |
- |
| qquickaction_p.h |
|
2789 |
- |
| qquickaction_p_p.h |
|
2579 |
- |
| qquickactiongroup.cpp |
!
\qmltype ActionGroup
\inherits QtObject
//! \nativetype QQuickActionGroup
\inqmlmodule QtQuick.Controls
\since 5.10
\ingroup utilities
\brief Groups actions together.
ActionGroup is a non-visual group of actions. A mutually \l exclusive
action group is used with actions where only one of the options can be
selected at a time.
The most straight-forward way to use ActionGroup is to declare actions
as children of the group.
\code
ActionGroup {
id: alignmentGroup
Action {
checked: true
checkable: true
text: qsTr("Left")
}
Action {
checkable: true
text: qsTr("Center")
}
Action {
checkable: true
text: qsTr("Right")
}
}
\endcode
Alternatively, the \l group attached property allows declaring the actions
elsewhere and assigning them to a specific group.
\code
ActionGroup { id: alignmentGroup }
Action {
checked: true
checkable: true
text: qsTr("Left")
ActionGroup.group: alignmentGroup
}
Action {
checkable: true
text: qsTr("Center")
ActionGroup.group: alignmentGroup
}
Action {
checkable: true
text: qsTr("Right")
ActionGroup.group: alignmentGroup
}
\endcode
More advanced use cases can be handled using the \c addAction() and
\c removeAction() methods.
\sa Action, ButtonGroup
|
12473 |
- |
| qquickactiongroup_p.h |
|
2815 |
- |
| qquickapplicationwindow.cpp |
!
\qmltype ApplicationWindow
\inherits Window
//! \nativetype QQuickApplicationWindow
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-containers
\ingroup qtquickcontrols-focusscopes
\brief Styled top-level window with support for a header and footer.
ApplicationWindow is a \l Window which makes it convenient to add
a \l {menuBar}{menu bar}, \l header and \l footer item to the window.
You can declare ApplicationWindow as the root item of your application,
and run it by using \l QQmlApplicationEngine. In this way you can control
the window's properties, appearance and layout from QML.
\image qtquickcontrols-applicationwindow-wireframe.png
{Window layout showing menu bar, header, content area, and footer}
\qml
import QtQuick.Controls
ApplicationWindow {
visible: true
menuBar: MenuBar {
// ...
}
header: ToolBar {
// ...
}
footer: TabBar {
// ...
}
StackView {
anchors.fill: parent
}
}
\endqml
\note By default, an ApplicationWindow is not visible.
\section2 Attached ApplicationWindow Properties
Due to how \l {Scope and Naming Resolution} works in QML, it is possible
to reference the \c id of the application root element anywhere in its
child QML objects. Even though this approach is fine for many applications
and use cases, for a generic QML component it may not be acceptable as it
creates a dependency to the surrounding environment.
ApplicationWindow provides a set of attached properties that can be used
to access the window and its building blocks from places where no direct
access to the window is available, without creating a dependency to a
certain window \c id. A QML component that uses the ApplicationWindow
attached properties works in any window regardless of its \c id.
\section2 Safe Areas
Since Qt 6.9 ApplicationWindow will automatically add padding to the
contentItem for any \l{SafeArea} {safe area margins} reported by the
window. This ensures that the contentItem stays inside the safe area
of the window, while the background item covers the entire window.
If you are manually handing safe area margins in the window's contentItem
you can override the default via the topPadding, leftPadding, rightPadding
and bottomPadding properties:
\snippet qtquickcontrols-appwindow-safeareas.qml 0
\snippet qtquickcontrols-appwindow-safeareas.qml 1
\snippet qtquickcontrols-appwindow-safeareas.qml 2
The \l{header}, \l{footer}, and \l{menuBar} properties do not receive
any automatic padding for the safe area margins. However, depending on
the style in use, the style may take safe areas into account in its
implementation of ToolBar, TabBar, and MenuBar.
\sa {Customizing ApplicationWindow}, Overlay, Page, {Container Controls},
{Focus Management in Qt Quick Controls}
|
36805 |
- |
| qquickapplicationwindow_p.h |
|
6043 |
- |
| qquickapplicationwindow_p_p.h |
|
3552 |
- |
| qquickbusyindicator.cpp |
!
\qmltype BusyIndicator
\inherits Control
//! \nativetype QQuickBusyIndicator
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-indicators
\brief Indicates background activity, for example, while content is being loaded.
\image qtquickcontrols-busyindicator.gif
{Spinning busy indicator showing activity in progress}
The busy indicator should be used to indicate activity while content is
being loaded or the UI is blocked waiting for a resource to become available.
The following snippet shows how to use the BusyIndicator:
\qml
BusyIndicator {
running: image.status === Image.Loading
}
\endqml
BusyIndicator is similar to an indeterminate \l ProgressBar. Both can be
used to indicate background activity. The main difference is visual, and
that ProgressBar 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 different places in user interfaces.
Typical places for a busy indicator:
\list
\li in the corner of a \l ToolBar
\li as an overlay on top of a \l Page
\li on the side of an \l ItemDelegate
\endlist
\sa {Customizing BusyIndicator}, {Indicator Controls}, ProgressBar
|
2763 |
- |
| qquickbusyindicator_p.h |
|
1389 |
- |
| qquickbutton.cpp |
!
\qmltype Button
\inherits AbstractButton
//! \nativetype QQuickButton
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-buttons
\brief Push-button that can be clicked to perform a command or answer a question.
\image qtquickcontrols-button.gif
{Button control in various interaction states}
Button presents a push-button control that can be pushed or clicked by
the user. Buttons are normally used to perform an action, or to answer
a question. Typical buttons are \e OK, \e Apply, \e Cancel, \e Close,
\e Yes, \e No, and \e Help.
Button inherits its API from AbstractButton. For instance, you can set
\l {AbstractButton::text}{text}, display an \l {Icons in Qt Quick Controls}{icon},
and react to \l {AbstractButton::clicked}{clicks} using the AbstractButton API.
A button emits the signal \l {AbstractButton::}{clicked()} when it is activated by the user.
Connect to this signal to perform the button's action. Buttons also
provide the signals \l {AbstractButton::}{canceled()}, \l {AbstractButton::}{doubleClicked()}, \l {AbstractButton::}{pressed()},
\l {AbstractButton::}{released()} and \l {AbstractButton::}{pressAndHold()} for long presses.
See the snippet below on how to connect to the button's signals.
\code
RowLayout {
Button {
text: "Ok"
onClicked: model.submit()
}
Button {
text: "Cancel"
onClicked: model.revert()
}
}
\endcode
\sa {Customizing Button}, {Button Controls}
|
3705 |
- |
| qquickbutton_p.h |
|
1441 |
- |
| qquickbutton_p_p.h |
|
839 |
- |
| qquickbuttongroup.cpp |
!
\qmltype ButtonGroup
\inherits QtObject
//! \nativetype QQuickButtonGroup
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup utilities
\brief Mutually-exclusive group of checkable buttons.
ButtonGroup is a non-visual, mutually exclusive group of buttons.
It is used with controls such as RadioButton, where only one of the options
can be selected at a time.
The most straight-forward way to use ButtonGroup is to assign
a list of buttons. For example, the list of children of a
\l{Item Positioners}{positioner} or a \l{Qt Quick Layouts}{layout}
that manages a group of mutually exclusive buttons.
\code
ButtonGroup {
buttons: column.children
}
Column {
id: column
RadioButton {
checked: true
text: qsTr("DAB")
}
RadioButton {
text: qsTr("FM")
}
RadioButton {
text: qsTr("AM")
}
}
\endcode
Mutually exclusive buttons do not always share the same parent item,
or the parent layout may sometimes contain items that should not be
included in the button group. Such cases are best handled using
the \l group attached property.
\code
ButtonGroup { id: radioGroup }
Column {
Label {
text: qsTr("Radio:")
}
RadioButton {
checked: true
text: qsTr("DAB")
ButtonGroup.group: radioGroup
}
RadioButton {
text: qsTr("FM")
ButtonGroup.group: radioGroup
}
RadioButton {
text: qsTr("AM")
ButtonGroup.group: radioGroup
}
}
\endcode
Another option is to filter the list of children. This is especially handy
if you're using a repeater to populate it, since the repeater will also be
a child of the parent layout:
\code
ButtonGroup {
buttons: column.children.filter((child) => child !== repeater)
}
Column {
id: column
Repeater {
id: repeater
model: [ qsTr("DAB"), qsTr("AM"), qsTr("FM") ]
RadioButton {
required property string modelData
text: modelData
}
}
}
\endcode
More advanced use cases can be handled using the \c addButton() and
\c removeButton() methods.
\sa RadioButton, {Button Controls}
|
15517 |
- |
| qquickbuttongroup_p.h |
|
3269 |
- |
| qquickcalendar.cpp |
!
\qmltype Calendar
\inherits QtObject
//! \nativetype QQuickCalendar
\inqmlmodule QtQuick.Controls
\brief A calendar namespace.
The Calendar singleton provides miscellaneous calendar-related
utilities.
\include zero-based-months.qdocinc
\sa MonthGrid, DayOfWeekRow, WeekNumberColumn
|
694 |
- |
| qquickcalendar_p.h |
|
1103 |
- |
| qquickcalendarmodel.cpp |
!
\qmltype CalendarModel
//! \inherits AbstractListModel
//! \nativetype QQuickCalendarModel
\inqmlmodule QtQuick.Controls
\brief A calendar model.
CalendarModel provides a way of creating a range of MonthGrid
instances. It is typically used as a model for a ListView that uses
MonthGrid as a delegate.
\snippet qtquickcontrols-calendarmodel.qml 1
In addition to the \c index property, a list of model data roles
are available in the context of each delegate:
\table
\row \li \b model.month : int \li The number of the month
\row \li \b model.year : int \li The number of the year
\endtable
\include zero-based-months.qdocinc
\sa MonthGrid, Calendar
|
5744 |
- |
| qquickcalendarmodel_p.h |
|
2069 |
- |
| qquickcheckbox.cpp |
!
\qmltype CheckBox
\inherits AbstractButton
//! \nativetype QQuickCheckBox
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-buttons
\brief Check button that can be toggled on or off.
\image qtquickcontrols-checkbox.gif
{Checkbox in unchecked, checked, and partially checked states}
CheckBox 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 \l CheckDelegate instead.
CheckBox inherits its API from \l AbstractButton. For instance, the
state of the checkbox can be set with the \l {AbstractButton::}{checked} property.
In addition to the checked and unchecked states, there is a third state:
partially checked. The partially checked state can be enabled using the
\l tristate property. This state indicates that the regular checked/unchecked
state can not be determined; generally because of other states that affect
the checkbox. This state is useful when several child nodes are selected
in a treeview, for example.
\code
ColumnLayout {
CheckBox {
checked: true
text: qsTr("First")
}
CheckBox {
text: qsTr("Second")
}
CheckBox {
checked: true
text: qsTr("Third")
}
}
\endcode
Hierarchical checkbox groups can be managed with a non-exclusive
\l ButtonGroup.
\image qtquickcontrols-checkbox-group.png
{Group of checkboxes for multiple selection}
The following example illustrates how the combined check state of
children can be bound to the check state of the parent checkbox:
\snippet qtquickcontrols-checkbox-group.qml 1
\sa {Customizing CheckBox}, ButtonGroup, {Button Controls}
|
6513 |
- |
| qquickcheckbox_p.h |
|
1877 |
- |
| qquickcheckdelegate.cpp |
!
\qmltype CheckDelegate
\inherits ItemDelegate
//! \nativetype QQuickCheckDelegate
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-delegates
\brief Item delegate with a check indicator that can be toggled on or off.
\image qtquickcontrols-checkdelegate.gif
{Check delegate in list showing checked and unchecked states}
CheckDelegate presents an item delegate that can be toggled on (checked) or
off (unchecked). Check delegates are typically used to select one or more
options from a set of options in a list. For smaller sets of options, or
for options that need to be uniquely identifiable, consider using
\l CheckBox instead.
CheckDelegate inherits its API from \l ItemDelegate, which is inherited
from AbstractButton. For instance, you can set \l {AbstractButton::text}{text},
and react to \l {AbstractButton::clicked}{clicks} using the AbstractButton
API. The state of the check delegate can be set with the
\l {AbstractButton::}{checked} property.
In addition to the checked and unchecked states, there is a third state:
partially checked. The partially checked state can be enabled using the
\l tristate property. This state indicates that the regular checked/unchecked
state can not be determined; generally because of other states that affect
the check delegate. This state is useful when several child nodes are selected
in a treeview, for example.
\code
ListView {
model: ["Option 1", "Option 2", "Option 3"]
delegate: CheckDelegate {
text: modelData
}
}
\endcode
\sa {Customizing CheckDelegate}, {Delegate Controls}, CheckBox
|
6549 |
- |
| qquickcheckdelegate_p.h |
|
1931 |
- |
| qquickcombobox.cpp |
!
\qmltype ComboBox
\inherits Control
//! \nativetype QQuickComboBox
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-input
\ingroup qtquickcontrols-focusscopes
\brief Combined button and popup list for selecting options.
\image qtquickcontrols-combobox.gif
{Combo box expanding to show dropdown list}
ComboBox is a combined button and popup list. It provides a means of
presenting a list of options to the user in a way that takes up the
minimum amount of screen space.
ComboBox is populated with a data model. The data model is commonly
a JavaScript array, a \l ListModel or an integer, but other types
of \l {qml-data-models}{data models} are also supported.
\code
ComboBox {
model: ["First", "Second", "Third"]
}
\endcode
\section1 Editable ComboBox
ComboBox can be made \l editable. An editable combo box auto-completes
its text based on what is available in the model.
The following example demonstrates appending content to an editable
combo box by reacting to the \l accepted signal.
\snippet qtquickcontrols-combobox-accepted.qml combobox
\section1 ComboBox's Popup
By default, clicking outside of ComboBox's popup will close it, and the
event is propagated to items lower in the stacking order. To prevent the
popup from closing, set its \l {Popup::}{closePolicy}:
\snippet qtquickcontrols-combobox-popup.qml closePolicy
To prevent event propagation, set its \l {Popup::}{modal} property to
\c true:
\snippet qtquickcontrols-combobox-popup.qml modal
\section1 ComboBox Model Roles
ComboBox is able to visualize standard \l {qml-data-models}{data models}
that provide the \c modelData role:
\list
\li models that have only one role
\li models that do not have named roles (JavaScript array, integer)
\endlist
When using models that have multiple named roles, ComboBox must be configured
to use a specific \l {textRole}{text role} for its \l {displayText}{display text}
and \l delegate instances. If you want to use a role of the model item
that corresponds to the text role, set \l valueRole. The \l currentValue
property and \l indexOfValue() method can then be used to get information
about those values.
For example:
\snippet qtquickcontrols-combobox-valuerole.qml file
\note If ComboBox is assigned a data model that has multiple named roles, but
\l textRole is not defined, ComboBox is unable to visualize it and throws a
\c {ReferenceError: modelData is not defined}.
\sa {Customizing ComboBox}, {Input Controls}, {Focus Management in Qt Quick Controls}
|
75588 |
- |
| qquickcombobox_p.h |
|
9660 |
- |
| qquickcontainer.cpp |
!
\qmltype Container
\inherits Control
//! \nativetype QQuickContainer
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-containers
\brief Abstract base type providing functionality common to containers.
Container is the base type of container-like user interface controls that
allow dynamic insertion and removal of items.
\section2 Using Containers
Typically, items are statically declared as children of Container, but it
is also possible to \l {addItem}{add}, \l {insertItem}{insert},
\l {moveItem}{move} and \l {removeItem}{remove} items dynamically. The
items in a container can be accessed using \l itemAt() or
\l contentChildren.
Most containers have the concept of a "current" item. The current item is
specified via the \l currentIndex property, and can be accessed using the
read-only \l currentItem property.
The following example illustrates dynamic insertion of items to a \l TabBar,
which is one of the concrete implementations of Container.
\code
Row {
TabBar {
id: tabBar
currentIndex: 0
width: parent.width - addButton.width
TabButton { text: "TabButton" }
}
Component {
id: tabButton
TabButton { text: "TabButton" }
}
Button {
id: addButton
text: "+"
flat: true
onClicked: {
tabBar.addItem(tabButton.createObject(tabBar))
console.log("added:", tabBar.itemAt(tabBar.count - 1))
}
}
}
\endcode
\section2 Managing the Current Index
When using multiple containers, such as \l TabBar and \l SwipeView, together,
their \l currentIndex properties can be bound to each other to keep them in
sync. When the user interacts with either container, its current index changes
automatically propagate to the other container.
Notice, however, that assigning a \c currentIndex value in JavaScript removes
the respective binding. In order to retain the bindings, use the following
methods to alter the current index:
\list
\li \l incrementCurrentIndex()
\li \l decrementCurrentIndex()
\li \l setCurrentIndex()
\endlist
\code
TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
}
SwipeView {
id: swipeView
currentIndex: tabBar.currentIndex
}
Button {
text: qsTr("Home")
onClicked: swipeView.setCurrentIndex(0)
enabled: swipeView.currentIndex != 0
}
Button {
text: qsTr("Previous")
onClicked: swipeView.decrementCurrentIndex()
enabled: swipeView.currentIndex > 0
}
Button {
text: qsTr("Next")
onClicked: swipeView.incrementCurrentIndex()
enabled: swipeView.currentIndex < swipeView.count - 1
}
\endcode
\section2 Implementing Containers
Container does not provide any default visualization. It is used to implement
such containers as \l SwipeView and \l TabBar. When implementing a custom
container, the most important part of the API is \l contentModel, which provides
the contained items in a way that it can be used as an object model for item
views and repeaters.
\code
Container {
id: container
contentItem: ListView {
model: container.contentModel
snapMode: ListView.SnapOneItem
orientation: ListView.Horizontal
}
Text {
text: "Page 1"
width: container.width
height: container.height
}
Text {
text: "Page 2"
width: container.width
height: container.height
}
}
\endcode
Notice how the sizes of the page items are set by hand. This is because the
example uses a plain Container, which does not make any assumptions on the
visual layout. It is typically not necessary to specify sizes for items in
concrete Container implementations, such as \l SwipeView and \l TabBar.
\sa {Container Controls}
|
28825 |
- |
| qquickcontainer_p.h |
|
3752 |
- |
| qquickcontainer_p_p.h |
|
2762 |
- |
| qquickcontentitem.cpp |
!
\internal
Helper class that aids debugging by producing more useful debugging output.
|
759 |
- |
| qquickcontentitem_p.h |
|
949 |
- |
| qquickcontextmenu.cpp |
!
\qmltype ContextMenu
\brief The ContextMenu attached type provides a way to open a context menu
in a platform-appropriate manner.
\inqmlmodule QtQuick.Controls
\ingroup qtquickcontrols-menus
\since 6.9
ContextMenu can be attached to any \l {QQuickItem}{item} in order to show a context menu
upon a platform-specific event, such as a right click or the context menu
key.
\snippet qtquickcontrols-contextmenu.qml root
\section1 Sharing context menus
It's possible to share a \l Menu amongst several attached context menu
objects. This allows reusing a single Menu when the items that need
context menus have data in common. For example:
\snippet qtquickcontrols-contextmenu-shared.qml file
\section1 Performance
ContextMenu lazily creates its \c Menu only when it's requested. If it
wasn't for this optimization, the \c Menu would be created when the
containing component is being loaded, which is typically at application
startup.
It is recommended not to give the \c Menu assigned to ContextMenu's \l menu
property an id when it's defined where it's assigned. Doing so prevents
this optimization. For example:
\snippet qtquickcontrols-contextmenu-id.qml root
The example in the \l {Sharing context menus} section works because the
\c Menu is defined separately from its assignment.
\section1 Interaction with other menus
If a \c Menu is opened via e.g. a \l TapHandler or other means, ContextMenu
will not open at the same time. This allows legacy applications that were
written before ContextMenu was introduced to continue working as expected.
\section1 Native menu support
ContextMenu is backed by a native menu on iOS.
\note if you assign your own \l menu, you must set
\l {Popup::popupType}{popupType} to \c {Popup.Native} to ensure native menu
support.
|
8722 |
- |
| qquickcontextmenu_p.h |
|
1603 |
- |
| qquickcontrol.cpp |
!
\qmltype Control
\inherits Item
//! \nativetype QQuickControl
\inqmlmodule QtQuick.Controls
\since 5.7
\brief Abstract base type providing functionality common to all controls.
Control is the base type of user interface controls. It receives input
events from the window system, and paints a representation of itself on
the screen.
\section1 Control Layout
The following diagram illustrates the layout of a typical control:
\image qtquickcontrols-control.png
{Basic control showing structure}
The \l {Item::}{implicitWidth} and \l {Item::}{implicitHeight} of a control
are typically based on the implicit sizes of the background and the content
item plus any insets and paddings. These properties determine how large
the control will be when no explicit \l {Item::}{width} or
\l {Item::}{height} is specified.
The geometry of the \l {Control::}{contentItem} is determined by the padding.
The following example reserves 10px padding between the boundaries of the
control and its content:
\code
Control {
padding: 10
contentItem: Text {
text: "Content"
}
}
\endcode
The \l {Control::}{background} item fills the entire width and height of the
control, unless insets or an explicit size have been given for it. Background
insets are useful for extending the touchable/interactive area of a control
without affecting its visual size. This is often used on touch devices to
ensure that a control is not too small to be interacted with by the user.
Insets affect the size of the control, and hence will affect how much space
they take up in a layout, for example.
Negative insets can be used to make the background larger than the control.
The following example uses negative insets to place a shadow outside the
control's boundaries:
\code
Control {
topInset: -2
leftInset: -2
rightInset: -6
bottomInset: -6
background: BorderImage {
source: ":/images/shadowed-background.png"
}
}
\endcode
\section1 Event Handling
All controls, except non-interactive indicators, do not let clicks and
touches through to items below them. For example, the \c console.log()
call in the example below will never be executed when clicking on the
Pane, because the \l MouseArea is below it in the scene:
\code
MouseArea {
anchors.fill: parent
onClicked: console.log("MouseArea was clicked")
Pane {
anchors.fill: parent
}
}
\endcode
Wheel events are consumed by controls if \l wheelEnabled is \c true.
\sa ApplicationWindow, Container, {Using Qt Quick Controls types in
property declarations}
|
68287 |
- |
| qquickcontrol_p.h |
|
10457 |
- |
| qquickcontrol_p_p.h |
|
8423 |
- |
| qquickdayofweekmodel.cpp |
|
2471 |
- |
| qquickdayofweekmodel_p.h |
|
1606 |
- |
| qquickdayofweekrow.cpp |
!
\qmltype DayOfWeekRow
\inherits Control
//! \nativetype QQuickDayOfWeekRow
\inqmlmodule QtQuick.Controls
\brief A row of names for the days in a week.
DayOfWeekRow presents day of week names in a row. The names of the days
are ordered and formatted using the specified \l {Control::locale}{locale}.
\image qtquickcontrols-dayofweekrow.webp
{Day of week row displaying weekday names}
\snippet qtquickcontrols-dayofweekrow.qml 1
DayOfWeekRow can be used as a standalone control, but it is most
often used in conjunction with MonthGrid. Regardless of the use case,
positioning of the row is left to the user.
\image qtquickcontrols-dayofweekrow-layout.webp
{Day of week row in calendar layout}
\snippet qtquickcontrols-dayofweekrow-layout.qml 1
The visual appearance of DayOfWeekRow can be changed by
implementing a \l {delegate}{custom delegate}.
\sa MonthGrid, WeekNumberColumn
|
5043 |
- |
| qquickdayofweekrow_p.h |
|
1716 |
- |
| qquickdeferredexecute.cpp |
!
\internal
For the history behind why these functions were introduced, see
the comments of QTBUG-50992, specifically
\l {https://bugreports.qt.io/browse/QTBUG-50992?focusedId=325677&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-325677}{this}.
The first commit to the QML engine to support deferred properties seems to
be 59b8d719d6122d86a4cc650911788cc4d778ce29.
The first commit to add support for it in Controls was
458eb65f730178bc93ba7b18f0e4dd2a13efad2e.
In short, deferred execution solved two issues:
\list 1
\li Incubation issues when using asynchronous loaders, AKA QTBUG-50992.
\li Performance issues from creating two items unnecessarily when a
styled control was customized, which is explained in more detail
in the commit message of 458eb65f730178bc93ba7b18f0e4dd2a13efad2e.
\endlist
\sa qmlExecuteDeferred
|
6594 |
- |
| qquickdeferredexecute_p_p.h |
|
2906 |
- |
| qquickdeferredpointer_p_p.h |
|
3423 |
- |
| qquickdelaybutton.cpp |
!
\qmltype DelayButton
\inherits AbstractButton
//! \nativetype QQuickDelayButton
\inqmlmodule QtQuick.Controls
\since 5.9
\ingroup qtquickcontrols-buttons
\brief Check button that triggers when held down long enough.
\image qtquickcontrols-delaybutton.gif
{Delay button with progress indicator filling on long press}
DelayButton is a checkable button that incorporates a delay before the
button becomes \l {AbstractButton::}{checked} and the \l activated()
signal is emitted. This delay prevents accidental presses.
The current progress is expressed as a decimal value between \c 0.0
and \c 1.0. The time it takes for \l activated() to be emitted is
measured in milliseconds, and can be set with the \l delay property.
The progress is indicated by a progress indicator on the button.
\sa {Customizing DelayButton}, {Button Controls}
|
6415 |
- |
| qquickdelaybutton_p.h |
|
1773 |
- |
| qquickdial.cpp |
!
\qmltype Dial
\inherits Control
//! \nativetype QQuickDial
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-input
\brief Circular dial that is rotated to set a value.
The Dial is similar to a traditional dial knob that is found on devices
such as stereos or industrial equipment. It allows the user to specify a
value within a range.
\image qtquickcontrols-dial-no-wrap.gif
{Dial without wrap, stopping at ends}
The value of the dial is set with the \l value property. The range is
set with the \l from and \l to properties. To enable or disable wrapping,
use the \l wrap property.
The dial can be manipulated with a keyboard. It supports the following
actions:
\table
\header \li \b {Action} \li \b {Key}
\row \li Decrease \l value by \l stepSize \li \c Qt.Key_Left
\row \li Decrease \l value by \l stepSize \li \c Qt.Key_Down
\row \li Set \l value to \l from \li \c Qt.Key_Home
\row \li Increase \l value by \l stepSize \li \c Qt.Key_Right
\row \li Increase \l value by \l stepSize \li \c Qt.Key_Up
\row \li Set \l value to \l to \li \c Qt.Key_End
\endtable
\include qquickdial.qdocinc inputMode
\sa {Customizing Dial}, {Input Controls}
|
28496 |
- |
| qquickdial_p.h |
|
4692 |
- |
| qquickdialog.cpp |
!
\qmltype Dialog
\inherits Popup
//! \nativetype QQuickDialog
\inqmlmodule QtQuick.Controls
\ingroup qtquickcontrols-dialogs
\ingroup qtquickcontrols-popups
\brief Popup dialog with standard buttons and a title, used for short-term interaction with the user.
\since 5.8
A dialog is a popup mostly used for short-term tasks and brief communications
with the user. Similarly to \l ApplicationWindow and \l Page, Dialog is organized
into three sections: \l header, \l {Popup::}{contentItem}, and \l footer.
\image qtquickcontrols-page-wireframe.webp
{Page wireframe with header, content area, and footer}
The \l {Popup::}{padding} properties only affect the contentItem. Use the
\l {Popup::}{spacing} property to affect the space between header,
contentItem and footer.
By default, Dialogs have \l {QQuickItem::}{focus}.
\section1 Dialog Title and Buttons
Dialog's \l title is displayed by a style-specific title bar that is assigned
as a dialog \l header by default.
Dialog's standard buttons are managed by a \l DialogButtonBox that is assigned
as a dialog \l footer by default. The dialog's \l standardButtons property is
forwarded to the respective property of the button box. Furthermore, the
\l {DialogButtonBox::}{accepted()} and \l {DialogButtonBox::}{rejected()}
signals of the button box are connected to the respective signals in Dialog.
\snippet qtquickcontrols-dialog.qml 1
\section1 Modal Dialogs
A \l {Popup::}{modal} dialog blocks input to other content beneath
the dialog. When a modal dialog is opened, the user must finish
interacting with the dialog and close it before they can access any
other content in the same window.
\snippet qtquickcontrols-dialog-modal.qml 1
\section1 Modeless Dialogs
A modeless dialog is a dialog that operates independently of other
content around the dialog. When a modeless dialog is opened, the user
is allowed to interact with both the dialog and the other content in
the same window.
\snippet qtquickcontrols-dialog-modeless.qml 1
\sa DialogButtonBox, {Popup Controls}
|
19520 |
- |
| qquickdialog_p.h |
|
4707 |
- |
| qquickdialog_p_p.h |
|
1659 |
- |
| qquickdialogbuttonbox.cpp |
!
\qmltype DialogButtonBox
\inherits Container
//! \nativetype QQuickDialogButtonBox
\inqmlmodule QtQuick.Controls
\ingroup qtquickcontrols-dialogs
\brief A button box used in dialogs.
\since 5.8
Dialogs and message boxes typically present buttons in an order that
conforms to the interface guidelines for that platform. Invariably,
different platforms have their dialog buttons in different orders.
DialogButtonBox allows a developer to add buttons to it and will
automatically use the appropriate order for the user's platform.
Most buttons for a dialog follow certain roles. Such roles include:
\list
\li Accepting or rejecting the dialog.
\li Asking for help.
\li Performing actions on the dialog itself (such as resetting fields or
applying changes).
\endlist
There can also be alternate ways of dismissing the dialog which may cause
destructive results.
Most dialogs have buttons that can almost be considered standard (e.g.
\uicontrol OK and \uicontrol Cancel buttons). It is sometimes convenient
to create these buttons in a standard way.
There are a couple ways of using DialogButtonBox. One way is to specify
the standard buttons (e.g. \uicontrol OK, \uicontrol Cancel, \uicontrol Save)
and let the button box setup the buttons.
\image qtquickcontrols-dialogbuttonbox.png
{Dialog button box with OK and Cancel buttons}
\snippet qtquickcontrols-dialogbuttonbox.qml 1
Alternatively, buttons and their roles can be specified by hand:
\snippet qtquickcontrols-dialogbuttonbox-attached.qml 1
You can also mix and match normal buttons and standard buttons.
When a button is clicked in the button box, the \l clicked() signal is
emitted for the actual button that is pressed. In addition, the
following signals are automatically emitted when a button with the
respective role(s) is pressed:
\table
\header
\li Role
\li Signal
\row
\li \c AcceptRole, \c YesRole
\li \l accepted()
\row
\li \c ApplyRole
\li \l applied()
\row
\li \c DiscardRole
\li \l discarded()
\row
\li \c HelpRole
\li \l helpRequested()
\row
\li \c RejectRole, \c NoRole
\li \l rejected()
\row
\li \c ResetRole
\li \l reset()
\endtable
\sa Dialog
|
35191 |
- |
| qquickdialogbuttonbox_p.h |
|
5485 |
- |
| qquickdialogbuttonbox_p_p.h |
|
2667 |
- |
| qquickdoublespinbox.cpp |
!
\qmltype DoubleSpinBox
\inherits Control
//! \nativetype QQuickDoubleSpinBox
\inqmlmodule QtQuick.Controls
\ingroup qtquickcontrols-input
\ingroup qtquickcontrols-focusscopes
\since 6.11
\brief Allows the user to select from a set of preset floating-point
values.
\image qtquickcontrols-doublespinbox.png
{Spin box displaying decimal values}
DoubleSpinBox is similar to \l SpinBox, except that it supports double
values rather than integer. The user can choose a value by clicking the up
or down indicator buttons, or by pressing up or down on the keyboard.
Optionally, DoubleSpinBox can be also made \l editable, so the user can
enter a text value in the input field.
By default, DoubleSpinBox provides discrete values in the range of
\c [0.00-99.99] with a \l stepSize of \c 1.0.
\snippet qtquickcontrols-doublespinbox.qml 1
\sa SpinBox, Tumbler, {Customizing DoubleSpinBox},
{Focus Management in Qt Quick Controls}
|
15711 |
- |
| qquickdoublespinbox_p.h |
|
6046 |
- |
| qquickdrawer.cpp |
!
\qmltype Drawer
\inherits Popup
//! \nativetype QQuickDrawer
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-navigation
\ingroup qtquickcontrols-popups
\brief Side panel that can be opened and closed using a swipe gesture.
Drawer provides a swipe-based side panel, similar to those often used in
touch interfaces to provide a central location for navigation.
\image qtquickcontrols-drawer.gif
{Drawer sliding in from edge}
Drawer can be positioned at any of the four edges of the content item.
The drawer above is positioned against the left edge of the window. The
drawer is then opened by \e "dragging" it out from the left edge of the
window.
\code
import QtQuick
import QtQuick.Controls
ApplicationWindow {
id: window
visible: true
Drawer {
id: drawer
width: 0.66 * window.width
height: window.height
Label {
text: "Content goes here!"
anchors.centerIn: parent
}
}
}
\endcode
Drawer is a special type of popup that resides at one of the window \l {edge}{edges}.
By default, Drawer re-parents itself to the window \c overlay, and therefore operates
on window coordinates. It is also possible to manually set the \l{Popup::}{parent} to
something else to make the drawer operate in a specific coordinate space.
Drawer can be configured to cover only part of its window edge. The following example
illustrates how Drawer can be positioned to appear below a window header:
\code
import QtQuick
import QtQuick.Controls
ApplicationWindow {
id: window
visible: true
header: ToolBar { }
Drawer {
y: header.height
width: window.width * 0.6
height: window.height - header.height
}
}
\endcode
The \l position property determines how much of the drawer is visible, as
a value between \c 0.0 and \c 1.0. It is not possible to set the x-coordinate
(or horizontal margins) of a drawer at the left or right window edge, or the
y-coordinate (or vertical margins) of a drawer at the top or bottom window edge.
In the image above, the application's contents are \e "pushed" across the
screen. This is achieved by applying a translation to the contents:
\code
import QtQuick
import QtQuick.Controls
ApplicationWindow {
id: window
width: 200
height: 228
visible: true
Drawer {
id: drawer
width: 0.66 * window.width
height: window.height
}
Label {
id: content
text: "Aa"
font.pixelSize: 96
anchors.fill: parent
verticalAlignment: Label.AlignVCenter
horizontalAlignment: Label.AlignHCenter
transform: Translate {
x: drawer.position * content.width * 0.33
}
}
}
\endcode
If you would like the application's contents to stay where they are when
the drawer is opened, don't apply a translation.
Drawer can be configured as a non-closable persistent side panel by
making the Drawer \l {Popup::modal}{non-modal} and \l {interactive}
{non-interactive}. See the \l {Qt Quick Controls 2 - Gallery}{Gallery}
example for more details.
\note On some platforms, certain edges may be reserved for system
gestures and therefore cannot be used with Drawer. For example, the
top and bottom edges may be reserved for system notifications and
control centers on Android and iOS.
\sa SwipeView, {Customizing Drawer}, {Navigation Controls}, {Popup Controls}
|
27444 |
- |
| qquickdrawer_p.h |
|
2234 |
- |
| qquickdrawer_p_p.h |
|
2145 |
- |
| qquickframe.cpp |
!
\qmltype Frame
\inherits Pane
//! \nativetype QQuickFrame
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-containers
\brief Visual frame for a logical group of controls.
Frame is used to layout a logical group of controls together within a
visual frame. Frame does not provide a layout of its own, but requires
you to position its contents, for instance by creating a \l RowLayout
or a \l ColumnLayout.
Items declared as children of a Frame are automatically parented to the
Frame's \l {Control::}{contentItem}. Items created dynamically need to be
explicitly parented to the contentItem.
If only a single item is used within a Frame, it will resize to fit the
implicit size of its contained item. This makes it particularly suitable
for use together with layouts.
\image qtquickcontrols-frame.png
{Frame with visible border containing grouped controls}
\snippet qtquickcontrols-frame.qml 1
\sa {Customizing Frame}, {Container Controls}
|
1713 |
- |
| qquickframe_p.h |
|
1081 |
- |
| qquickframe_p_p.h |
|
716 |
- |
| qquickgroupbox.cpp |
!
\qmltype GroupBox
\inherits Frame
//! \nativetype QQuickGroupBox
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-containers
\brief Visual frame and title for a logical group of controls.
GroupBox is used to layout a logical group of controls together, within
a \l {title}{titled} visual frame. GroupBox does not provide a layout of its own, but
requires you to position its contents, for instance by creating a \l RowLayout
or a \l ColumnLayout.
Items declared as children of a GroupBox are automatically parented to the
GroupBox's \l {Control::}{contentItem}. Items created dynamically need to be
explicitly parented to the contentItem.
If only a single item is used within a GroupBox, it will resize to fit the
implicit size of its contained item. This makes it particularly suitable
for use together with layouts.
\image qtquickcontrols-groupbox.png
{Group box with title and border containing checkboxes}
\snippet qtquickcontrols-groupbox.qml 1
\section2 Checkable GroupBox
Even though GroupBox has no built-in check box, it is straightforward
to create a checkable GroupBox by pairing it with a CheckBox.
\image qtquickcontrols-groupbox-checkable.png
{Checkable group box with checkbox in title}
It is a common pattern to enable or disable the groupbox's children when
its checkbox is toggled on or off, but it is up to the application to decide
on the behavior of the checkbox.
\snippet qtquickcontrols-groupbox-checkable.qml 1
\sa CheckBox, {Customizing GroupBox}, {Container Controls}
|
7202 |
- |
| qquickgroupbox_p.h |
|
2146 |
- |
| qquickheaderview.cpp |
!
\qmltype HorizontalHeaderView
\inqmlmodule QtQuick.Controls
\ingroup qtquickcontrols-containers
\inherits TableView
\brief Provides a horizontal header view to accompany a \l TableView.
\include qquickheaderview.qdocinc {detailed-description} {HorizontalHeaderView}
\sa VerticalHeaderView
|
20567 |
- |
| qquickheaderview_p.h |
|
3719 |
- |
| qquickheaderview_p_p.h |
|
4245 |
- |
| qquickheaderviewdelegate.cpp |
!
\qmltype HorizontalHeaderViewDelegate
\inherits TableViewDelegate
\inqmlmodule QtQuick.Controls
\since 6.10
\ingroup qtquickcontrols-delegates
\image qtquickcontrols-headerviewdelegate.png
{Header view delegate in table column header}
The HorizontalHeaderViewDelegate serves as the default delegate
automatically assigned to the \l HorizontalHeaderView's
\l {TableView::delegate} {delegate property}.
This delegate handles rendering every header cell using the
application's predefined style specifications.
HorizontalHeaderViewDelegate inherits TableViewDelegate, which means
that it's composed of two items:
a \l[QML]{Control::}{background} and
a \l [QML]{Control::}{contentItem}.
\sa {Customizing HeaderViewDelegate}, {HorizontalHeaderView}
|
4194 |
- |
| qquickheaderviewdelegate_p.h |
|
1734 |
- |
| qquickicon.cpp |
|
5636 |
- |
| qquickicon_p.h |
|
2428 |
- |
| qquickicon_p_p.h |
|
1395 |
- |
| qquickindicatorbutton_p.cpp |
|
3681 |
- |
| qquickindicatorbutton_p.h |
|
2714 |
- |
| qquickitemdelegate.cpp |
!
\qmltype ItemDelegate
\inherits AbstractButton
//! \nativetype QQuickItemDelegate
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-delegates
\brief Basic item delegate that can be used in various views and controls.
\image qtquickcontrols-itemdelegate.gif
{Item delegate in list showing interaction states}
ItemDelegate presents a standard view item. It can be used as a delegate
in various views and controls, such as \l ListView and \l ComboBox.
ItemDelegate inherits its API from AbstractButton. For instance, you can set
\l {AbstractButton::text}{text}, display an \l {Icons in Qt Quick Controls}{icon},
and react to \l {AbstractButton::clicked}{clicks} using the AbstractButton API.
\snippet qtquickcontrols-itemdelegate.qml 1
\sa {Customizing ItemDelegate}, {Delegate Controls}
|
3123 |
- |
| qquickitemdelegate_p.h |
|
1454 |
- |
| qquickitemdelegate_p_p.h |
|
889 |
- |
| qquicklabel.cpp |
!
\qmltype Label
\inherits Text
//! \nativetype QQuickLabel
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup text
\brief Styled text label with inherited font.
Label extends \l Text with styling and \l {Control::font}{font}
inheritance. The default colors and font are style specific. Label
can also have a visual \l background item.
\image qtquickcontrols-label.png
{Label displaying text with styling}
\snippet qtquickcontrols-label.qml 1
You can use the properties of \l Text to change the appearance of the text as desired:
\qml
Label {
text: "Hello world"
font.pixelSize: 22
font.italic: true
}
\endqml
\sa {Customizing Label}
|
15226 |
- |
| qquicklabel_p.h |
|
3463 |
- |
| qquicklabel_p_p.h |
|
3632 |
- |
| qquickmenu.cpp |
|
84268 |
- |
| qquickmenu_p.h |
|
5710 |
- |
| qquickmenu_p_p.h |
|
5153 |
- |
| qquickmenubar.cpp |
!
\qmltype MenuBar
\inherits Container
//! \nativetype QQuickMenuBar
\inqmlmodule QtQuick.Controls
\since 5.10
\ingroup qtquickcontrols-menus
\ingroup qtquickcontrols-focusscopes
\brief Provides a window menu bar.
\image qtquickcontrols-menubar.png
{Menu bar with File, Edit, and View menus}
MenuBar consists of drop-down menus, and is normally located at the top
edge of the window.
\quotefromfile qtquickcontrols-menubar.qml
\skipuntil begin
\printto skipfrom
\skipuntil skipto
\printto end
Typically, menus are statically declared as children of the menu bar, but
MenuBar also provides API to \l {addMenu}{add}, \l {insertMenu}{insert},
\l {removeMenu}{remove}, and \l {takeMenu}{take} menus dynamically. The
menus in a menu bar can be accessed using \l menuAt().
\section1 Native menu bars
Since Qt 6.8, a MenuBar is implemented as a native menu bar on \macos. As a
result, all Menus, MenuItems and MenuBarItems within a MenuBar will also be native.
While this has the advantage that everything will look native, it also comes with the
disadvantage that the delegates set on the mentioned controls will not be used
for rendering.
If a native MenuBar is not wanted, you can set
\l {Qt::AA_DontUseNativeMenuBar}{QGuiApplication::setAttribute(Qt::AA_DontUseNativeMenuBar)}
to disable it.
\sa {Customizing MenuBar}, Menu, MenuBarItem, {Menu Controls},
{Focus Management in Qt Quick Controls}
|
32201 |
- |
| qquickmenubar_p.h |
|
2546 |
- |
| qquickmenubar_p_p.h |
|
3057 |
- |
| qquickmenubaritem.cpp |
!
\qmltype MenuBarItem
\inherits AbstractButton
//! \nativetype QQuickMenuBarItem
\inqmlmodule QtQuick.Controls
\since 5.10
\ingroup qtquickcontrols-menus
\brief Presents a drop-down menu within a MenuBar.
MenuBarItem presents a Menu within a MenuBar. The respective drop-down menu
is shown when a MenuBarItem is \l triggered via keyboard, mouse, or touch.
\image qtquickcontrols-menubar.png
{Menu bar with File, Edit, and View menus}
MenuBarItem is used as a default \l {MenuBar::}{delegate} type for MenuBar.
Notice that it is not necessary to declare MenuBarItem instances by hand when
using MenuBar. It is sufficient to declare Menu instances as children of the
MenuBar and the respective items are created automatically.
\sa {Customizing MenuBar}, MenuBar, {Menu Controls}
|
6940 |
- |
| qquickmenubaritem_p.h |
|
2017 |
- |
| qquickmenubaritem_p_p.h |
|
1353 |
- |
| qquickmenuitem.cpp |
!
\qmltype MenuItem
\inherits AbstractButton
//! \nativetype QQuickMenuItem
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-menus
\brief Presents an item within a Menu.
MenuItem is a convenience type that implements the AbstractButton API,
providing a familiar way to respond to menu items being \l triggered, for
example.
MenuItem inherits its API from AbstractButton. For instance, you can set
\l {AbstractButton::text}{text} and \l {Icons in Qt Quick Controls}{icon}
using the AbstractButton API.
\code
Button {
id: fileButton
text: "File"
onClicked: menu.open()
Menu {
id: menu
MenuItem {
text: "New..."
onTriggered: document.reset()
}
MenuItem {
text: "Open..."
onTriggered: openDialog.open()
}
MenuItem {
text: "Save"
onTriggered: saveDialog.open()
}
}
}
\endcode
\sa {Customizing Menu}, Menu, {Menu Controls}
|
9174 |
- |
| qquickmenuitem_p.h |
|
2785 |
- |
| qquickmenuitem_p_p.h |
|
1382 |
- |
| qquickmenuseparator.cpp |
!
\qmltype MenuSeparator
\inherits Control
//! \nativetype QQuickMenuSeparator
\inqmlmodule QtQuick.Controls
\since 5.8
\ingroup qtquickcontrols-separators
\brief Separates a group of items in a menu from adjacent items.
MenuSeparator is used to visually distinguish between groups of items in a
menu by separating them with a line.
\image qtquickcontrols-menuseparator.webp
{Menu separator dividing menu items}
\quotefromfile qtquickcontrols-menuseparator-custom.qml
\skipto import QtQuick
\printuntil import QtQuick.Controls
\skipto Menu
\printto contentItem.parent: window
\skipline contentItem.parent: window
\printuntil text: qsTr("Exit")
\printuntil }
\printuntil }
\sa {Customizing Menu}, Menu, {Separator Controls}
|
1773 |
- |
| qquickmenuseparator_p.h |
|
1141 |
- |
| qquickmonthgrid.cpp |
!
\qmltype MonthGrid
\inherits Control
//! \nativetype QQuickMonthGrid
\inqmlmodule QtQuick.Controls
\brief A grid of days for a calendar month.
MonthGrid presents a calendar month in a grid. The contents are
calculated for a given \l month and \l year, using the specified
\l {Control::locale}{locale}.
\image qtquickcontrols-monthgrid.webp
{Month grid displaying calendar days}
\snippet qtquickcontrols-monthgrid.qml 1
MonthGrid can be used as a standalone control, but it is most often
used in conjunction with DayOfWeekRow and WeekNumberColumn. Regardless
of the use case, positioning of the grid is left to the user.
\image qtquickcontrols-monthgrid-layout.webp
{Month grid in calendar layout}
\snippet qtquickcontrols-monthgrid-layout.qml 1
The visual appearance of MonthGrid can be changed by
implementing a \l {delegate}{custom delegate}.
When viewing any given month, MonthGrid shows days from the previous and
next month. This means it always shows six rows, even when first or last
row is entirely within an adjacent month.
\section1 Localizing days
To localize days, use \l {Locale::toString()}{Locale.toString()}.
For example, to display day numbers in an Arabic locale:
\snippet qtquickcontrols-monthgrid-localization.qml 1
\sa DayOfWeekRow, WeekNumberColumn, CalendarModel,
{Qt Quick Controls - Event Calendar}
|
11142 |
- |
| qquickmonthgrid_p.h |
|
2399 |
- |
| qquickmonthmodel.cpp |
|
6295 |
- |
| qquickmonthmodel_p.h |
|
2173 |
- |
| qquicknativeicon.cpp |
|
987 |
- |
| qquicknativeicon_p.h |
|
1331 |
- |
| qquicknativeiconloader.cpp |
|
1481 |
- |
| qquicknativeiconloader_p.h |
|
1207 |
- |
| qquicknativemenuitem.cpp |
!
\class QQuickNativeMenuItem
\brief A native menu item.
\since 6.7
\internal
Creates a native menu item from an Action/MenuItem/Menu,
and syncs the properties and signals. It can also represent a
MenuSeparator.
\sa Menu, Action
|
12963 |
- |
| qquicknativemenuitem_p.h |
|
2109 |
- |
| qquickoverlay.cpp |
!
\qmltype Overlay
\inherits Item
//! \nativetype QQuickOverlay
\inqmlmodule QtQuick.Controls
\since 5.10
\brief A window overlay for popups.
Overlay provides a layer for popups, ensuring that popups are displayed above
other content and that the background is dimmed when a \l {Popup::}{modal} or
\l {Popup::dim}{dimmed} popup is visible.
The overlay is an ordinary Item that covers the entire window. It can be used
as a visual parent to position a popup in scene coordinates.
\include qquickoverlay-popup-parent.qdocinc
\sa ApplicationWindow
|
40093 |
- |
| qquickoverlay_p.h |
|
3599 |
- |
| qquickoverlay_p_p.h |
|
3232 |
- |
| qquickpage.cpp |
!
\qmltype Page
\inherits Pane
//! \nativetype QQuickPage
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-containers
\ingroup qtquickcontrols-focusscopes
\brief Styled page control with support for a header and footer.
Page is a container control which makes it convenient to add
a \l header and \l footer item to a page.
\image qtquickcontrols-page-wireframe.webp
{Page layout showing header, content area, and footer}
Items declared as children of a Page are:
\list
\li automatically parented to the Page's contentItem. Items created
dynamically need to be explicitly parented to the contentItem.
\li not automatically positioned or resized.
\endlist
The following example snippet illustrates how to use a page-specific
toolbar header and an application-wide tabbar footer.
\qml
import QtQuick.Controls
import QtQuick.Layouts
ApplicationWindow {
visible: true
StackView {
anchors.fill: parent
initialItem: Page {
header: ToolBar {
// ...
}
ColumnLayout {
anchors.fill: parent
// ...
}
}
}
footer: TabBar {
// ...
}
}
\endqml
\sa ApplicationWindow, {Container Controls},
{Focus Management in Qt Quick Controls}
|
13021 |
- |
| qquickpage_p.h |
|
2767 |
- |
| qquickpage_p_p.h |
|
1268 |
- |
| qquickpageindicator.cpp |
!
\qmltype PageIndicator
\inherits Control
//! \nativetype QQuickPageIndicator
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-indicators
\brief Indicates the currently active page.
PageIndicator is used to indicate the currently active page
in a container of multiple pages. PageIndicator consists of
delegate items that present pages.
\image qtquickcontrols-pageindicator.png
{Page indicator showing current page position}
\code
Column {
StackLayout {
id: stackLayout
Page {
// ...
}
Page {
// ...
}
Page {
// ...
}
}
PageIndicator {
currentIndex: stackLayout.currentIndex
count: stackLayout.count
}
}
\endcode
\sa SwipeView, {Customizing PageIndicator}, {Indicator Controls}
|
9462 |
- |
| qquickpageindicator_p.h |
|
2136 |
- |
| qquickpane.cpp |
!
\qmltype Pane
\inherits Control
//! \nativetype QQuickPane
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-containers
\ingroup qtquickcontrols-focusscopes
\brief Provides a background matching with the application style and theme.
Pane provides a background color that matches with the application style
and theme. Pane does not provide a layout of its own, but requires you to
position its contents, for instance by creating a \l RowLayout or a
\l ColumnLayout.
Items declared as children of a Pane are automatically parented to the
Pane's \l[QtQuickControls2]{Control::}{contentItem}. Items created
dynamically need to be explicitly parented to the \c contentItem.
As mentioned in \l {Event Handling}, Pane does not let click and touch
events through to items beneath it. If \l [QML] {Control::}{wheelEnabled}
is \c true, the same applies to mouse wheel events.
\section1 Content Sizing
If only a single item is used within a Pane, it will resize to fit the
implicit size of its contained item. This makes it particularly suitable
for use together with layouts.
\image qtquickcontrols-pane.png
{Pane with styled background containing checkboxes}
\snippet qtquickcontrols-pane.qml 1
Sometimes there might be two items within the pane:
\code
Pane {
SwipeView {
// ...
}
PageIndicator {
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
}
}
\endcode
In this case, Pane cannot calculate a sensible implicit size. Since we're
anchoring the \l PageIndicator over the \l SwipeView, we can simply set the
content size to the view's implicit size:
\code
Pane {
contentWidth: view.implicitWidth
contentHeight: view.implicitHeight
SwipeView {
id: view
// ...
}
PageIndicator {
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
}
}
\endcode
If the \l[QtQuickControls2]{Control::}{contentItem} has no implicit size
and only one child, Pane will use the implicit size of that child. For
example, in the following code, the Pane assumes the size of the Rectangle:
\code
Pane {
Item {
Rectangle {
implicitWidth: 200
implicitHeight: 200
color: "salmon"
}
}
}
\endcode
\sa {Customizing Pane}, {Container Controls},
{Focus Management in Qt Quick Controls}, {Event Handling}
|
13035 |
- |
| qquickpane_p.h |
|
2219 |
- |
| qquickpane_p_p.h |
|
1642 |
- |
| qquickpopup.cpp |
|
109179 |
- |
| qquickpopup_p.h |
|
18615 |
- |
| qquickpopup_p_p.h |
|
7482 |
- |
| qquickpopupanchors.cpp |
|
1680 |
- |
| qquickpopupanchors_p.h |
|
1463 |
- |
| qquickpopupanchors_p_p.h |
|
1021 |
- |
| qquickpopupitem.cpp |
|
13820 |
- |
| qquickpopupitem_p_p.h |
|
4369 |
- |
| qquickpopuppositioner.cpp |
|
18838 |
- |
| qquickpopuppositioner_p_p.h |
|
1600 |
- |
| qquickpopupwindow.cpp |
|
23459 |
- |
| qquickpopupwindow_p_p.h |
|
1649 |
- |
| qquickpresshandler.cpp |
isClick |
4255 |
- |
| qquickpresshandler_p_p.h |
|
1389 |
- |
| qquickprogressbar.cpp |
!
\qmltype ProgressBar
\inherits Control
//! \nativetype QQuickProgressBar
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-indicators
\brief Indicates the progress of an operation.
\image qtquickcontrols-progressbar.gif
{Progress bar filling from left to right}
ProgressBar indicates the progress of an operation. The value should be updated
regularly. The range is defined by \l from and \l to, which both can contain any value.
\code
ProgressBar {
value: 0.5
}
\endcode
ProgressBar also supports a special \l indeterminate mode, which is useful,
for example, when unable to determine the size of the item being downloaded,
or if the download progress gets interrupted due to a network disconnection.
\image qtquickcontrols-progressbar-indeterminate.gif
{Progress bar in indeterminate animation mode}
\code
ProgressBar {
indeterminate: true
}
\endcode
The indeterminate mode is similar to a \l BusyIndicator. Both can be used
to indicate background activity. The main difference is visual, and that
ProgressBar can also present a concrete amount of progress (when it can be
determined). Due to the visual difference, indeterminate progress bars and
busy indicators fit different places in user interfaces. Typical places for
an indeterminate progress bar:
\list
\li at the bottom of a \l ToolBar
\li inline within the content of a \l Page
\li in an \l ItemDelegate to show the progress of a particular item
\endlist
\sa {Customizing ProgressBar}, BusyIndicator, {Indicator Controls}
|
6542 |
- |
| qquickprogressbar_p.h |
|
2141 |
- |
| qquickradiobutton.cpp |
!
\qmltype RadioButton
\inherits AbstractButton
//! \nativetype QQuickRadioButton
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-buttons
\brief Exclusive radio button that can be toggled on or off.
\image qtquickcontrols-radiobutton.gif
{Radio buttons showing exclusive selection behavior}
RadioButton presents 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.
RadioButton inherits its API from \l AbstractButton. For instance,
you can set \l {AbstractButton::text}{text} and react to
\l {AbstractButton::clicked}{clicks} using the AbstractButton API.
The state of the radio button can be set with the
\l {AbstractButton::}{checked} property.
Radio buttons are \l {AbstractButton::autoExclusive}{auto-exclusive}
by default. Only one button can be checked at any time amongst radio
buttons that belong to the same parent item; checking another button
automatically unchecks the previously checked one. For radio buttons
that do not share a common parent, ButtonGroup can be used to manage
exclusivity.
\l RadioDelegate is similar to RadioButton, except that it is typically
used in views.
\code
ColumnLayout {
RadioButton {
checked: true
text: qsTr("First")
}
RadioButton {
text: qsTr("Second")
}
RadioButton {
text: qsTr("Third")
}
}
\endcode
\sa ButtonGroup, {Customizing RadioButton}, {Button Controls}, RadioDelegate
|
2762 |
- |
| qquickradiobutton_p.h |
|
1098 |
- |
| qquickradiodelegate.cpp |
!
\qmltype RadioDelegate
\inherits ItemDelegate
//! \nativetype QQuickRadioDelegate
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-delegates
\brief Exclusive item delegate with a radio indicator that can be toggled on or off.
\image qtquickcontrols-radiodelegate.gif
{Radio delegates showing exclusive selection behavior}
RadioDelegate presents an item delegate that can be toggled on (checked) or
off (unchecked). Radio delegates are typically used to select one option
from a set of options.
RadioDelegate inherits its API from \l ItemDelegate, which is inherited
from AbstractButton. For instance, you can set \l {AbstractButton::text}{text},
and react to \l {AbstractButton::clicked}{clicks} using the AbstractButton
API. The state of the radio delegate can be set with the
\l {AbstractButton::}{checked} property.
Radio delegates are \l {AbstractButton::autoExclusive}{auto-exclusive}
by default. Only one delegate can be checked at any time amongst radio
delegates that belong to the same parent item; checking another delegate
automatically unchecks the previously checked one. For radio delegates
that do not share a common parent, ButtonGroup can be used to manage
exclusivity.
\l RadioButton is similar to RadioDelegate, except that it is typically
not used in views, but rather when there are only a few options, and often
with the requirement that each button is uniquely identifiable.
\code
ButtonGroup {
id: buttonGroup
}
ListView {
model: ["Option 1", "Option 2", "Option 3"]
delegate: RadioDelegate {
text: modelData
checked: index == 0
ButtonGroup.group: buttonGroup
}
}
\endcode
\sa {Customizing RadioDelegate}, {Delegate Controls}, RadioButton
|
3006 |
- |
| qquickradiodelegate_p.h |
|
1108 |
- |
| qquickrangeslider.cpp |
!
\qmltype RangeSlider
\inherits Control
//! \nativetype QQuickRangeSlider
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-input
\ingroup qtquickcontrols-focusscopes
\brief Used to select a range of values by sliding two handles along a track.
\image qtquickcontrols-rangeslider.gif
{Range slider with two handles defining range}
RangeSlider is used to select a range specified by two values, by sliding
each handle along a track.
In the example below, custom \l from and \l to values are set, and the
initial positions of the \l first and \l second handles are set:
\code
RangeSlider {
from: 1
to: 100
first.value: 25
second.value: 75
}
\endcode
In order to perform an action when the value for a particular handle changes,
use the following syntax:
\code
first.onMoved: console.log("first.value changed to " + first.value)
\endcode
The \l {first.position} and \l {second.position} properties are expressed as
fractions of the control's size, in the range \c {0.0 - 1.0}.
The \l {first.visualPosition} and \l {second.visualPosition} properties are
the same, except that they are reversed in a
\l {Right-to-left User Interfaces}{right-to-left} application.
The \c visualPosition is useful for positioning the handles when styling
RangeSlider. In the example above, \l {first.visualPosition} will be \c 0.24
in a left-to-right application, and \c 0.76 in a right-to-left application.
For a slider that allows the user to select a single value, see \l Slider.
\sa {Customizing RangeSlider}, {Input Controls},
{Focus Management in Qt Quick Controls}
|
52173 |
- |
| qquickrangeslider_p.h |
|
7376 |
- |
| qquickroundbutton.cpp |
!
\qmltype RoundButton
\inherits Button
//! \nativetype QQuickRoundButton
\inqmlmodule QtQuick.Controls
\since 5.8
\ingroup qtquickcontrols-buttons
\brief A push-button control with rounded corners that can be clicked by the user.
\image qtquickcontrols-roundbutton.png
{Round button control}
RoundButton is identical to \l Button, except that it has a \l radius property
which allows the corners to be rounded without having to customize the
\l background.
\snippet qtquickcontrols-roundbutton.qml 1
\sa {Customizing RoundButton}, {Button Controls}
|
2760 |
- |
| qquickroundbutton_p.h |
|
1299 |
- |
| qquickscrollbar.cpp |
!
\qmltype ScrollBar
\inherits Control
//! \nativetype QQuickScrollBar
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-indicators
\brief Vertical or horizontal interactive scroll bar.
\image qtquickcontrols-scrollbar.gif
{Scroll bar handle moving along track}
ScrollBar is an interactive bar that can be used to scroll to a specific
position. A scroll bar can be either \l vertical or \l horizontal, and can
be attached to any \l Flickable, such as \l ListView and \l GridView.
It can also be used with \l ScrollView.
\code
Flickable {
// ...
ScrollBar.vertical: ScrollBar { }
}
\endcode
\section1 Attaching ScrollBar to a Flickable
When ScrollBar is attached \l {ScrollBar::vertical}{vertically} or
\l {ScrollBar::horizontal}{horizontally} to a Flickable, its geometry and
the following properties are automatically set and updated as appropriate:
\list
\li \l orientation
\li \l position
\li \l {ScrollBar::} {size}
\li \l active
\endlist
An attached ScrollBar re-parents itself to the target Flickable. A vertically
attached ScrollBar resizes itself to the height of the Flickable, and positions
itself to either side of it based on the \l {Control::mirrored}{layout direction}.
A horizontally attached ScrollBar resizes itself to the width of the Flickable,
and positions itself to the bottom. The automatic geometry management can be disabled
by specifying another parent for the attached ScrollBar. This can be useful, for
example, if the ScrollBar should be placed outside a clipping Flickable. This is
demonstrated by the following example:
\code
Flickable {
id: flickable
clip: true
// ...
ScrollBar.vertical: ScrollBar {
parent: flickable.parent
anchors.top: flickable.top
anchors.left: flickable.right
anchors.bottom: flickable.bottom
}
}
\endcode
Notice that ScrollBar does not filter key events of the Flickable it is
attached to. The following example illustrates how to implement scrolling
with up and down keys:
\code
Flickable {
focus: true
Keys.onUpPressed: scrollBar.decrease()
Keys.onDownPressed: scrollBar.increase()
ScrollBar.vertical: ScrollBar { id: scrollBar }
}
\endcode
\section1 Binding the Active State of Horizontal and Vertical Scroll Bars
Horizontal and vertical scroll bars do not share the \l active state with
each other by default. In order to keep both bars visible whilst scrolling
to either direction, establish a two-way binding between the active states
as presented by the following example:
\snippet qtquickcontrols-scrollbar-active.qml 1
\section1 Non-attached Scroll Bars
It is possible to create an instance of ScrollBar without using the
attached property API. This is useful when the behavior of the attached
scroll bar is not sufficient or a \l Flickable is not in use. In the
following example, horizontal and vertical scroll bars are used to
scroll over the text without using \l Flickable:
\snippet qtquickcontrols-scrollbar-non-attached.qml 1
\image qtquickcontrols-scrollbar-non-attached.png
{Scroll bar used standalone without attached property}
When using a non-attached ScrollBar, the following must be done manually:
\list
\li Layout the scroll bar (with the \l {Item::}{x} and \l {Item::}{y} or
\l {Item::}{anchors} property, for example).
\li Set the \l size and \l position properties to determine the size and position
of the scroll bar in relation to the scrolled item.
\li Set the \l active property to determine when the scroll bar will be
visible.
\endlist
\include varying-delegate-heights-section.qdocinc {file} {1} {ScrollBar}
\sa ScrollIndicator, ScrollView, {Customizing ScrollBar}, {Indicator Controls}
|
44725 |
- |
| qquickscrollbar_p.h |
|
5999 |
- |
| qquickscrollbar_p_p.h |
|
3947 |
- |
| qquickscrollindicator.cpp |
!
\qmltype ScrollIndicator
\inherits Control
//! \nativetype QQuickScrollIndicator
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-indicators
\brief Vertical or horizontal non-interactive scroll indicator.
\image qtquickcontrols-scrollindicator.gif
{Scroll indicator showing scroll position}
ScrollIndicator is a non-interactive indicator that indicates the current scroll
position. A scroll indicator can be either \l vertical or \l horizontal, and can
be attached to any \l Flickable, such as \l ListView and \l GridView.
\code
Flickable {
// ...
ScrollIndicator.vertical: ScrollIndicator { }
}
\endcode
\section1 Attaching ScrollIndicator to a Flickable
\note When ScrollIndicator is attached \l {ScrollIndicator::vertical}{vertically}
or \l {ScrollIndicator::horizontal}{horizontally} to a Flickable, its geometry and
the following properties are automatically set and updated as appropriate:
\list
\li \l orientation
\li \l position
\li \l size
\li \l active
\endlist
An attached ScrollIndicator re-parents itself to the target Flickable. A vertically
attached ScrollIndicator resizes itself to the height of the Flickable, and positions
itself to either side of it based on the \l {Control::mirrored}{layout direction}.
A horizontally attached ScrollIndicator resizes itself to the width of the Flickable,
and positions itself to the bottom. The automatic geometry management can be disabled
by specifying another parent for the attached ScrollIndicator. This can be useful, for
example, if the ScrollIndicator should be placed outside a clipping Flickable. This is
demonstrated by the following example:
\code
Flickable {
id: flickable
clip: true
// ...
ScrollIndicator.vertical: ScrollIndicator {
parent: flickable.parent
anchors.top: flickable.top
anchors.left: flickable.right
anchors.bottom: flickable.bottom
}
}
\endcode
\section1 Binding the Active State of Horizontal and Vertical Scroll Indicators
Horizontal and vertical scroll indicators do not share the \l active state with
each other by default. In order to keep both indicators visible whilst scrolling
to either direction, establish a two-way binding between the active states as
presented by the following example:
\snippet qtquickcontrols-scrollindicator-active.qml 1
\section1 Non-attached Scroll Indicators
It is possible to create an instance of ScrollIndicator without using the
attached property API. This is useful when the behavior of the attached
scoll indicator is not sufficient or a \l Flickable is not in use. In the
following example, horizontal and vertical scroll indicators are used to
indicate how far the user has scrolled over the text (using \l MouseArea
instead of \l Flickable):
\snippet qtquickcontrols-scrollindicator-non-attached.qml 1
\image qtquickcontrols-scrollindicator-non-attached.png
{Scroll indicator used standalone without attached property}
\include varying-delegate-heights-section.qdocinc {file} {1} {ScrollIndicator}
\sa ScrollBar, {Customizing ScrollIndicator}, {Indicator Controls}
|
22406 |
- |
| qquickscrollindicator_p.h |
|
4030 |
- |
| qquickscrollview.cpp |
!
\qmltype ScrollView
\inherits Pane
//! \nativetype QQuickScrollView
\inqmlmodule QtQuick.Controls
\since 5.9
\ingroup qtquickcontrols-containers
\ingroup qtquickcontrols-focusscopes
\brief Scrollable view.
ScrollView provides scrolling for user-defined content. It can be used to
either replace a \l Flickable, or to decorate an existing one.
\image qtquickcontrols-scrollview.png
{Scroll view containing scrollable content}
The first example demonstrates the simplest usage of ScrollView.
\snippet qtquickcontrols-scrollview.qml file
The second example illustrates using an existing \l Flickable, that is,
a \l ListView.
\snippet qtquickcontrols-scrollview-listview.qml file
\note As of Qt-6.0, ScrollView automatically clips its contents if you
don't use a Flickable as a child. If this is not wanted, you can
set your own Flickable as a child, and control the \l {Item::}{clip}
property on the Flickable explicitly.
\section2 Sizing
As with Flickable, there are several things to keep in mind when using
ScrollView:
\list
\li If only a single item is used within a ScrollView, the content size is
automatically calculated based on the implicit size of its contained item.
However, if more than one item is used (or an implicit size is not
provided), the \l {QtQuick.Controls::Pane::}{contentWidth} and
\l {QtQuick.Controls::Pane::}{contentHeight} properties must
be set to the combined size of its contained items.
\li If the content size is less than or equal to the size of the ScrollView,
it will not be scrollable.
\li If you want the ScrollView to only scroll vertically, you can bind
\l {QtQuick.Controls::Pane::}{contentWidth} to
\l {QtQuick.Controls::Control::}{availableWidth}
(and vice versa for contentHeight). This will let the contents fill
out all the available space horizontally inside the ScrollView, taking
any padding or scroll bars into account.
\endlist
\section2 Scroll Bars
The horizontal and vertical scroll bars can be accessed and customized using
the \l {ScrollBar::horizontal}{ScrollBar.horizontal} and \l {ScrollBar::vertical}
{ScrollBar.vertical} attached properties. The following example adjusts the scroll
bar policies so that the horizontal scroll bar is always off, and the vertical
scroll bar is always on.
\snippet qtquickcontrols-scrollview-policy.qml file
\section2 Touch vs. Mouse Interaction
On touch, ScrollView enables flicking and makes the scroll bars non-interactive.
\image qtquickcontrols-scrollindicator.gif
{Scroll indicator showing scroll position}
When interacted with a mouse device, flicking is disabled and the scroll bars
are interactive.
\image qtquickcontrols-scrollbar.gif
{Scroll bar handle moving along track}
Scroll bars can be made interactive on touch, or non-interactive when interacted
with a mouse device, by setting the \l {ScrollBar::}{interactive} property explicitly
to \c true or \c false, respectively.
\snippet qtquickcontrols-scrollview-interactive.qml file
\include varying-delegate-heights-section.qdocinc {file} {2} {ScrollBar}
\sa ScrollBar, ScrollIndicator, {Customizing ScrollView}, {Container Controls},
{Focus Management in Qt Quick Controls}
|
28953 |
- |
| qquickscrollview_p.h |
|
1987 |
- |
| qquicksearchfield.cpp |
!
\qmltype SearchField
\inherits Control
//! \nativetype QQuickSearchField
\inqmlmodule QtQuick.Controls
\since 6.10
\ingroup qtquickcontrols-input
\ingroup qtquickcontrols-focusscopes
\brief A specialized input field designed to use for search functionality.
SearchField is a specialized input field designed to use for search functionality.
The control includes a text field, search and clear icons, and a popup that
displays suggestions or search results.
\note The iOS style does not provide a built-in popup for SearchField in
order to preserve the native look and feel. If a popup is still wanted,
it has to be defined by the user.
\image qtquickcontrols-searchfield.gif
{Search field with search icon and clear button}
\section1 SearchField's Indicators
SearchField provides two optional embedded indicator buttons: \l searchIndicator and
\l clearIndicator.
These are not indicators in the sense of \l BusyIndicator or \l ProgressBar. Instead,
they are interactive controls embedded into the field (similar to the up/down buttons
in \l SpinBox). Pressing \l searchIndicator triggers \l searchButtonPressed, and pressing
\l clearIndicator triggers \l clearButtonPressed.
In addition to exposing the actions, the indicator buttons provide interaction state
(pressed/hovered/focused, etc.) that can be used by styles.
\section2 Customizing indicator content
The \l searchIndicator and \l clearIndicator properties are read-only. Customization is
supported through their internal properties.
In particular, the button's visual content is provided by its \c indicator item, which is
writable. This allows the default content to be replaced or removed entirely.
For example, to remove both indicator icons:
\code
SearchField {
searchIndicator.indicator: null
clearIndicator.indicator: null
}
\endcode
This is a supported customization scenario. Different SearchField variants may omit one
of the buttons (for example, providing only a search button) or replace the indicator
content with an alternative item (for example, a microphone icon to trigger speech input).
\sa searchIndicator, clearIndicator, searchButtonPressed, clearButtonPressed
\section1 SearchField Model Roles
SearchField is able to visualize standard \l {qml-data-models}{data models}
that provide the \c modelData role:
\list
\li models that have only one role
\li models that do not have named roles (JavaScript array, integer)
\endlist
When using models that have multiple named roles, SearchField must be configured
to use a specific \l {textRole}{text role} for its \l {text}{text}
and \l delegate instances.
\code
ListModel {
id : fruitModel
ListElement { name: "Apple"; color: "green" }
ListElement { name: "Cherry"; color: "red" }
ListElement { name: "Banana"; color: "yellow" }
ListElement { name: "Orange"; color: "orange" }
ListElement { name: "WaterMelon"; color: "pink" }
}
SortFilterProxyModel {
id: fruitFilter
sourceModel: fruitModel
sorters: [
RoleSorter {
roleName: "name"
}
]
filters: [
FunctionFilter {
property var regExp: new RegExp(fruitSearch.text, "i")
onRegExpChanged: invalidate()
function filter(name: string): bool {
return regExp.test(name);
}
}
]
}
SearchField {
id: fruitSearch
suggestionModel: fruitFilter
textRole: "name"
anchors.horizontalCenter: parent.horizontalCenter
}
\endcode
|
44845 |
- |
| qquicksearchfield_p.h |
|
5808 |
- |
| qquickselectionrectangle.cpp |
!
\qmltype SelectionRectangle
\inherits Control
//! \nativetype QQuickSelectionRectangle
\inqmlmodule QtQuick.Controls
\since 6.2
\ingroup utilities
\brief Used to select table cells inside a TableView.
\image qtquickcontrols-selectionrectangle.png
{Selection rectangle for selecting table items}
SelectionRectangle is used for selecting table cells in a TableView. It lets
the user start a selection by doing a pointer drag inside the viewport, or by
doing a long press on top of a cell.
For a SelectionRectangle to be able to select cells, TableView must have
an ItemSelectionModel assigned. The ItemSelectionModel will store any
selections done on the model, and can be used for querying
which cells that the user has selected.
The following example shows how you can make a SelectionRectangle target
a TableView:
\snippet qtquickcontrols-selectionrectangle.qml 0
\note A SelectionRectangle itself is not shown as part of a selection. Only the
delegates (like topLeftHandle and bottomRightHandle) are used.
You should also consider \l {Selecting items}{rendering the TableView delegate as selected}.
\sa TableView, TableView::selectionModel, ItemSelectionModel
|
28440 |
- |
| qquickselectionrectangle_p.h |
|
3359 |
- |
| qquickselectionrectangle_p_p.h |
|
2326 |
- |
| qquickshortcutcontext.cpp |
|
4355 |
- |
| qquickshortcutcontext_p_p.h |
|
832 |
- |
| qquickslider.cpp |
!
\qmltype Slider
\inherits Control
//! \nativetype QQuickSlider
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-input
\brief Used to select a value by sliding a handle along a track.
\image qtquickcontrols-slider.gif
{Slider handle moving along track}
Slider is used to select a value by sliding a handle along a track.
In the example below, custom \l from, \l value, and \l to values are set:
\code
Slider {
from: 1
value: 25
to: 100
}
\endcode
The \l position property is expressed as a fraction of the control's size,
in the range \c {0.0 - 1.0}. The \l visualPosition property is
the same, except that it is reversed in a
\l {Right-to-left User Interfaces}{right-to-left} application. The
visualPosition is useful for positioning the handle when styling Slider.
In the example above, \l visualPosition will be \c 0.24 in a left-to-right
application, and \c 0.76 in a right-to-left application.
For a slider that allows the user to select a range by providing two
handles, see \l RangeSlider.
\sa {Customizing Slider}, {Input Controls}
|
23892 |
- |
| qquickslider_p.h |
|
5014 |
- |
| qquickspinbox.cpp |
!
\qmltype SpinBox
\inherits Control
//! \nativetype QQuickSpinBox
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-input
\ingroup qtquickcontrols-focusscopes
\brief Allows the user to select from a set of preset values.
\image qtquickcontrols-spinbox.png
{Spin box with numeric value and buttons}
SpinBox allows the user to choose an integer value by clicking the up
or down indicator buttons, or by pressing up or down on the keyboard.
Optionally, SpinBox can be also made \l editable, so the user can enter
a text value in the input field.
By default, SpinBox provides discrete values in the range of \c [0-99]
with a \l stepSize of \c 1.
\snippet qtquickcontrols-spinbox.qml 1
For floating point values, use \l DoubleSpinBox.
\section2 Custom Values
\image qtquickcontrols-spinbox-textual.png
{Spin box displaying textual values}
Even though SpinBox works on integer values, it can be customized to
accept arbitrary input values. The following snippet demonstrates how
\l validator, \l textFromValue and \l valueFromText can be used to
customize the default behavior.
\snippet qtquickcontrols-spinbox-textual.qml 1
A prefix and suffix can be added using regular expressions:
\snippet qtquickcontrols-spinbox-prefix.qml 1
\sa Tumbler, {Customizing SpinBox}, {Focus Management in Qt Quick Controls},
{DoubleSpinBox}
|
16149 |
- |
| qquickspinbox_p.h |
|
6202 |
- |
| qquicksplitview.cpp |
|
82403 |
- |
| qquicksplitview_p.h |
|
6102 |
- |
| qquicksplitview_p_p.h |
|
5061 |
- |
| qquickstackelement.cpp |
|
11238 |
- |
| qquickstackelement_p_p.h |
|
3028 |
- |
| qquickstacktransition.cpp |
|
4527 |
- |
| qquickstacktransition_p_p.h |
|
1956 |
- |
| qquickstackview.cpp |
|
62670 |
- |
| qquickstackview_p.cpp |
|
16407 |
- |
| qquickstackview_p.h |
!
\internal
Input from the user that is turned into QQuickStackElements.
This was added to support the QML-compiler-friendly pushElement[s]
functions.
|
8570 |
- |
| qquickstackview_p_p.h |
|
3993 |
- |
| qquickswipe_p.h |
Q_REVISION(2, 1) |
3418 |
- |
| qquickswipedelegate.cpp |
!
\qmltype SwipeDelegate
\inherits ItemDelegate
//! \nativetype QQuickSwipeDelegate
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-delegates
\brief Swipable item delegate.
SwipeDelegate presents a view item that can be swiped left or right to
expose more options or information. It is used as a delegate in views such
as \l ListView.
In the following example, SwipeDelegate is used in a \l ListView to allow
items to be removed from it by swiping to the left:
\snippet qtquickcontrols-swipedelegate.qml 1
SwipeDelegate inherits its API from \l ItemDelegate, which is inherited
from AbstractButton. For instance, you can set \l {AbstractButton::text}{text},
and react to \l {AbstractButton::clicked}{clicks} using the AbstractButton
API.
Information regarding the progress of a swipe, as well as the components
that should be shown upon swiping, are both available through the
\l {SwipeDelegate::}{swipe} grouped property object. For example,
\c swipe.position holds the position of the
swipe within the range \c -1.0 to \c 1.0. The \c swipe.left
property determines which item will be displayed when the control is swiped
to the right, and vice versa for \c swipe.right. The positioning of these
components is left to applications to decide. For example, without specifying
any position for \c swipe.left or \c swipe.right, the following will
occur:
\image qtquickcontrols-swipedelegate.gif
{Swipe delegate revealing actions on swipe gesture}
If \c swipe.left and \c swipe.right are anchored to the left and
right of the \l {Control::}{background} item (respectively), they'll behave like this:
\image qtquickcontrols-swipedelegate-leading-trailing.gif
{Swipe delegate showing leading and trailing actions}
When using \c swipe.left and \c swipe.right, the control cannot be
swiped past the left and right edges. To achieve this type of "wrapping"
behavior, set \c swipe.behind instead. This will result in the same
item being shown regardless of which direction the control is swiped. For
example, in the image below, we set \c swipe.behind and then swipe the
control repeatedly in both directions:
\image qtquickcontrols-swipedelegate-behind.gif
{Swipe delegate showing behind swipe action}
\sa {Customizing SwipeDelegate}, {Delegate Controls}, {Qt Quick Controls 2 - Gallery}{Gallery Example}
|
52695 |
- |
| qquickswipedelegate_p.h |
|
2505 |
- |
| qquickswipedelegate_p_p.h |
|
1588 |
- |
| qquickswipeview.cpp |
!
\qmltype SwipeView
\inherits Container
//! \nativetype QQuickSwipeView
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-navigation
\ingroup qtquickcontrols-containers
\ingroup qtquickcontrols-focusscopes
\brief Enables the user to navigate pages by swiping sideways.
SwipeView provides a swipe-based navigation model.
\image qtquickcontrols-swipeview.gif
{Swipe view swiping between pages}
SwipeView is populated with a set of pages. One page is visible at a time.
The user can navigate between the pages by swiping sideways. Notice that
SwipeView itself is entirely non-visual. It is recommended to combine it
with PageIndicator, to give the user a visual clue that there are multiple
pages.
\snippet qtquickcontrols-swipeview-indicator.qml 1
As shown above, SwipeView is typically populated with a static set of
pages that are defined inline as children of the view. It is also possible
to \l {Container::addItem()}{add}, \l {Container::insertItem()}{insert},
\l {Container::moveItem()}{move}, and \l {Container::removeItem()}{remove}
pages dynamically at run time.
\include container-currentindex.qdocinc {file} {SwipeView} {TabBar}
It is generally not advisable to add excessive amounts of pages to a
SwipeView. However, when the amount of pages grows larger, or individual
pages are relatively complex, it may be desirable to free up resources by
unloading pages that are outside the immediate reach of the user.
The following example presents how to use \l Loader to keep a maximum of
three pages simultaneously instantiated.
\code
SwipeView {
Repeater {
model: 6
Loader {
active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
sourceComponent: Text {
text: index
Component.onCompleted: console.log("created:", index)
Component.onDestruction: console.log("destroyed:", index)
}
}
}
}
\endcode
\note SwipeView takes over the geometry management of items added to the
view. Using anchors on the items is not supported, and any \c width
or \c height assignment will be overridden by the view. Notice that
this only applies to the root of the item. Specifying width and height,
or using anchors for its children works as expected.
\sa TabBar, PageIndicator, {Customizing SwipeView}, {Navigation Controls}, {Container Controls},
{Focus Management in Qt Quick Controls}
|
13744 |
- |
| qquickswipeview_p.h |
Q_REVISION(2, 1) |
3651 |
- |
| qquickswitch.cpp |
!
\qmltype Switch
\inherits AbstractButton
//! \nativetype QQuickSwitch
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-buttons
\brief Switch button that can be toggled on or off.
\image qtquickcontrols-switch.gif
{Switch control in on and off states}
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.
For larger sets of options, such as those in a list, consider using
\l SwitchDelegate instead.
Switch inherits its API from \l AbstractButton. For instance, the state
of the switch can be set with the \l {AbstractButton::}{checked} property.
The \l {AbstractButton::}{clicked} and \l {AbstractButton::toggled} signals
are emitted when the switch is interactively clicked by the user via touch,
mouse, or keyboard.
\code
ColumnLayout {
Switch {
text: qsTr("Wi-Fi")
checked: Networking.wifiEnabled
onClicked: Networking.wifiEnabled = checked
}
Switch {
text: qsTr("Bluetooth")
checked: Networking.bluetoothEnabled
onClicked: Networking.bluetoothEnabled = checked
}
}
\endcode
\sa {Customizing Switch}, {Button Controls}
|
6666 |
- |
| qquickswitch_p.h |
|
1636 |
- |
| qquickswitchdelegate.cpp |
!
\qmltype SwitchDelegate
\inherits ItemDelegate
//! \nativetype QQuickSwitchDelegate
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-delegates
\brief Item delegate with a switch indicator that can be toggled on or off.
\image qtquickcontrols-switchdelegate.gif
{Switch delegates showing on and off states}
SwitchDelegate presents an item delegate that can be toggled on (checked) or
off (unchecked). Switch delegates are typically used to select one or more
options from a set of options. For smaller sets of options, or for options
that need to be uniquely identifiable, consider using \l Switch instead.
SwitchDelegate inherits its API from \l ItemDelegate, which is inherited
from \l AbstractButton. For instance, you can set \l {AbstractButton::text}{text},
and react to \l {AbstractButton::clicked}{clicks} using the \l AbstractButton
API. The state of the switch delegate can be set with the
\l {AbstractButton::}{checked} property.
\code
ListView {
model: ["Option 1", "Option 2", "Option 3"]
delegate: SwitchDelegate {
text: modelData
}
}
\endcode
\sa {Customizing SwitchDelegate}, {Delegate Controls}
|
6685 |
- |
| qquickswitchdelegate_p.h |
|
1704 |
- |
| qquicktabbar.cpp |
!
\qmltype TabBar
\inherits Container
//! \nativetype QQuickTabBar
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-navigation
\ingroup qtquickcontrols-containers
\ingroup qtquickcontrols-focusscopes
\brief Allows the user to switch between different views or subtasks.
TabBar provides a tab-based navigation model.
\image qtquickcontrols-tabbar-wireframe.webp
{Tab bar wireframe showing tab navigation}
TabBar is populated with TabButton controls, and can be used together with
any layout or container control that provides \c currentIndex -property,
such as \l StackLayout or \l SwipeView
\snippet qtquickcontrols-tabbar.qml 1
As shown above, TabBar is typically populated with a static set of tab buttons
that are defined inline as children of the tab bar. It is also possible to
\l {Container::addItem()}{add}, \l {Container::insertItem()}{insert},
\l {Container::moveItem()}{move}, and \l {Container::removeItem()}{remove}
items dynamically at run time. The items can be accessed using
\l {Container::}{itemAt()} or \l {Container::}{contentChildren}.
\include container-currentindex.qdocinc {file} {TabBar} {SwipeView}
\section2 Resizing Tabs
By default, TabBar resizes its buttons to fit the width of the control.
The available space is distributed equally to each button. The default
resizing behavior can be overridden by setting an explicit width for the
buttons.
The following example illustrates how to keep each tab button at their
implicit size instead of being resized to fit the tabbar:
\image qtquickcontrols-tabbar-explicit.png
{Tab bar with First, Second, Third tabs at implicit widths}
\snippet qtquickcontrols-tabbar-explicit.qml 1
\section2 Flickable Tabs
If the total width of the buttons exceeds the available width of the tab bar,
it automatically becomes flickable.
\image qtquickcontrols-tabbar-flickable.png
{Tab bar in flickable for scrolling many tabs}
\snippet qtquickcontrols-tabbar-flickable.qml 1
\section2 Vertical Tabs
TabBar can be laid out vertically by setting \l orientation to
\c Qt.Vertical. In that case, the tab buttons are stacked in a vertical
list, and \l {Resizing Tabs}{resizing} is done based on the available
height instead of width.
\sa TabButton, {Customizing TabBar}, {Navigation Controls}, {Container Controls},
{Focus Management in Qt Quick Controls}
|
18479 |
- |
| qquicktabbar_p.h |
|
3293 |
- |
| qquicktabbutton.cpp |
!
\qmltype TabButton
\inherits AbstractButton
//! \nativetype QQuickTabButton
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-navigation
\brief Button with a look suitable for a TabBar.
\image qtquickcontrols-tabbutton.png
{Tab button in tab bar}
TabButton is used in conjunction with a \l TabBar.
\snippet qtquickcontrols-tabbutton.qml 1
TabButton inherits its API from AbstractButton. For instance, you can set
\l {AbstractButton::text}{text}, and react to \l {AbstractButton::clicked}{clicks}
using the AbstractButton API.
\sa TabBar, {Customizing TabButton}, {Button Controls}, {Navigation Controls}
|
1758 |
- |
| qquicktabbutton_p.h |
|
1080 |
- |
| qquicktableviewdelegate.cpp |
!
\qmltype TableViewDelegate
\inherits ItemDelegate
\inqmlmodule QtQuick.Controls
\since 6.9
\ingroup qtquickcontrols-delegates
\brief A delegate that can be assigned to a TableView.
\image qtquickcontrols-tableviewdelegate.png
{Table view displaying addresses using a table view delegate}
A TableViewDelegate is a delegate that can be assigned to the
\l {TableView::delegate} {delegate property} of a \l TableView.
It renders each cell of the table in the view using the application style.
\code
TableView {
anchors.fill: parent
delegate: TableViewDelegate {}
// model: yourModel
}
\endcode
TableViewDelegate inherits \l ItemDelegate, which means that it's composed of
two items: a \l[QML]{Control::}{background} and a \l [QML]{Control::}{contentItem}.
The position of the contentItem is controlled with \l [QML]{Control::}{padding}.
\section2 Interacting with pointers
TableViewDelegate inherits \l ItemDelegate. This means that it will emit signals such as
\l {AbstractButton::clicked()}{clicked} when the user clicks on the delegate.
You can connect to this signal to implement application-specific functionality.
However, the ItemDelegate API does not give you information about the position of the
click, or which modifiers are being held. If this is needed, a better approach would
be to use pointer handlers, for example:
\code
TableView {
id: tableView
delegate: TableViewDelegate {
TapHandler {
acceptedButtons: Qt.RightButton
onTapped: someContextMenu.open()
}
TapHandler {
acceptedModifiers: Qt.ControlModifier
onTapped: tableView.doSomethingToCell(row, column)
}
}
}
\endcode
\note If you want to disable the default behavior that occurs when the
user clicks on the delegate (like changing the current index), you can set
\l {TableView::pointerNavigationEnabled}{pointerNavigationEnabled} to \c false.
\section2 Editing cells in the table
TableViewDelegate has a default \l {TableView::editDelegate}{edit delegate} assigned.
If \l TableView has \l {TableView::editTriggers}{edit triggers} set, and
the \l {TableView::model}{model} has support for \l {Editing cells} {editing model items},
then the user can activate any of the edit triggers to edit the text of
the \l {TableViewDelegate::current}{current} table cell.
The default edit delegate will use the \c {Qt.EditRole} to read and write data to the
\l {TableView::model}{model}. If you need to use another role, or otherwise have needs
outside what the default edit delegate offers, you can always assign your own delegate
to \l {TableView::editDelegate}{TableView.editDelegate}.
\sa {Customizing TableViewDelegate}, {TableView}
|
7761 |
- |
| qquicktableviewdelegate_p.h |
|
2194 |
- |
| qquicktableviewdelegate_p_p.h |
|
967 |
- |
| qquicktemplatesutils.cpp |
!
\internal
Returns \c true if \a item is a \c QQuickControl or similar interactive
type that should be a QQuickControl-subclass but cannot due to existing
inheritance; e.g. \c QQuickTextField or \c QQuickTextArea.
\c QQuickPopup is not considered a controls type for this function due to
the original use cases that resulted in this being factored out.
\c QQuickLabel is not interactive.
|
1154 |
- |
| qquicktemplatesutils_p.h |
|
703 |
- |
| qquicktextarea.cpp |
!
\qmltype TextArea
\inherits TextEdit
//! \nativetype QQuickTextArea
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-input
\brief Multi-line text input area.
TextArea is a multi-line text editor. TextArea extends TextEdit with
a \l {placeholderText}{placeholder text} functionality, and adds decoration.
\image qtquickcontrols-textarea.png
{Text area for multiline text input}
\code
TextArea {
placeholderText: qsTr("Enter description")
}
\endcode
TextArea is not scrollable by itself. Especially on screen-size constrained
platforms, it is often preferable to make entire application pages scrollable.
On such a scrollable page, a non-scrollable TextArea might behave better than
nested scrollable controls. Notice, however, that in such a scenario, the background
decoration of the TextArea scrolls together with the rest of the scrollable
content.
\section2 Scrollable TextArea
If you want to make a TextArea scrollable, for example, when it covers
an entire application page, it can be placed inside a \l ScrollView.
\image qtquickcontrols-textarea-scrollable.png
{Scrollable text area with scroll bars}
\snippet qtquickcontrols-textarea-scrollable.qml 1
A TextArea that is placed inside a \l ScrollView does the following:
\list
\li Sets the content size automatically
\li Ensures that the background decoration stays in place
\li Clips the content
\endlist
\section2 Tab Focus
By default, pressing the tab key while TextArea has
\l {Item::activeFocus}{active focus} results in a tab character being input
into the control itself. To make tab pass active focus onto another item,
use the attached \l KeyNavigation properties:
\code
TextField {
id: textField
}
TextArea {
KeyNavigation.priority: KeyNavigation.BeforeItem
KeyNavigation.tab: textField
}
\endcode
\sa TextField, {Customizing TextArea}, {Input Controls}
|
34797 |
- |
| qquicktextarea_p.h |
|
6770 |
- |
| qquicktextarea_p_p.h |
|
4321 |
- |
| qquicktextfield.cpp |
!
\qmltype TextField
\inherits TextInput
//! \nativetype QQuickTextField
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-input
\brief Single-line text input field.
TextField is a single line text editor. TextField extends TextInput with
a \l {placeholderText}{placeholder text} functionality, and adds decoration.
\table
\row \li \image qtquickcontrols-textfield-normal.png
{Text field in normal state}
\li A text field in its normal state.
\row \li \image qtquickcontrols-textfield-focused.png
{Text field in focused state with highlight}
\li A text field that has active focus.
\row \li \image qtquickcontrols-textfield-disabled.png
{Text field in disabled state}
\li A text field that is disabled.
\endtable
\code
TextField {
placeholderText: qsTr("Enter name")
}
\endcode
\sa TextArea, {Customizing TextField}, {Input Controls}
|
26877 |
- |
| qquicktextfield_p.h |
|
6035 |
- |
| qquicktextfield_p_p.h |
|
4004 |
- |
| qquicktheme.cpp |
|
5989 |
- |
| qquicktheme_p.h |
|
1713 |
- |
| qquicktheme_p_p.h |
|
1071 |
- |
| qquicktoolbar.cpp |
!
\qmltype ToolBar
\inherits Pane
//! \nativetype QQuickToolBar
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-containers
\brief Container for context-sensitive controls.
ToolBar is a container of application-wide and context sensitive
actions and controls, such as navigation buttons and search fields.
ToolBar is commonly used as a \l {ApplicationWindow::header}{header}
or a \l {ApplicationWindow::footer}{footer} of an \l ApplicationWindow.
ToolBar does not provide a layout of its own, but requires you to
position its contents, for instance by creating a \l RowLayout. If only
a single item is used within the ToolBar, it will resize to fit the
implicit size of its contained item. This makes it particularly suitable
for use together with layouts.
\image qtquickcontrols-toolbar.png
{Toolbar containing buttons and other controls}
\code
ApplicationWindow {
visible:true
header: ToolBar {
RowLayout {
anchors.fill: parent
ToolButton {
text: qsTr("‹")
onClicked: stack.pop()
}
Label {
text: "Title"
elide: Label.ElideRight
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
Layout.fillWidth: true
}
ToolButton {
text: qsTr("⋮")
onClicked: menu.open()
}
}
}
StackView {
id: stack
anchors.fill: parent
}
}
\endcode
\sa ApplicationWindow, ToolButton, {Customizing ToolBar}, {Container Controls}
|
4164 |
- |
| qquicktoolbar_p.h |
|
1366 |
- |
| qquicktoolbutton.cpp |
!
\qmltype ToolButton
\inherits Button
//! \nativetype QQuickToolButton
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-buttons
\brief Button with a look suitable for a ToolBar.
ToolButton is functionally similar to \l Button, but provides a look that
is more suitable within a \l ToolBar.
\image qtquickcontrols-toolbar.png
{Toolbar containing tool buttons}
\snippet qtquickcontrols-toolbar.qml 1
ToolButton inherits its API from AbstractButton. For instance, you can set
\l {AbstractButton::text}{text}, display an \l {Icons in Qt Quick Controls}{icon},
and react to \l {AbstractButton::clicked}{clicks} using the AbstractButton API.
\sa ToolBar, {Customizing ToolButton}, {Button Controls}
|
1729 |
- |
| qquicktoolbutton_p.h |
|
980 |
- |
| qquicktoolseparator.cpp |
!
\qmltype ToolSeparator
\inherits Control
//! \nativetype QQuickToolSeparator
\inqmlmodule QtQuick.Controls
\since 5.8
\ingroup qtquickcontrols-separators
\brief Separates a group of items in a toolbar from adjacent items.
ToolSeparator is used to visually distinguish between groups of items in a
toolbar by separating them with a line. It can be used in horizontal or
vertical toolbars by setting the \l orientation property to \c Qt.Vertical
or \c Qt.Horizontal, respectively.
\image qtquickcontrols-toolseparator.png
{Tool separator dividing toolbar buttons}
\snippet qtquickcontrols-toolseparator.qml 1
\sa {Customizing ToolSeparator}, {Separator Controls}
|
3218 |
- |
| qquicktoolseparator_p.h |
|
1612 |
- |
| qquicktooltip.cpp |
!
\qmltype ToolTip
\inherits Popup
//! \nativetype QQuickToolTip
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-popups
\brief Provides tool tips for any control.
A tool tip is a short piece of text that informs the user of a control's
function. It is typically placed above or below the parent control. The
tip text can be any \l{Rich Text Processing}{rich text} formatted string.
\image qtquickcontrols-tooltip.png
{Tooltip displaying helpful text}
\section2 Attached Tool Tips
The most straight-forward way to setup tool tips for controls is to
specify \l text and \l {visible}{visibility} via attached properties.
The following example illustrates this approach:
\snippet qtquickcontrols-tooltip.qml 1
Under normal circumstances, there is only one tool tip visible at a time.
In order to save resources, all items that use the ToolTip attached property
share the same visual tool tip label instance. Even though the visuals are
shared, \c text, \c timeout and \c delay are stored individually for each item
that uses the respective attached property. However, multiple items cannot
make the shared tool tip visible at the same time. The shared tool tip is only
shown for the last item that made it visible. The position of the shared tool
tip is determined by the framework.
\include qquicktooltip.qdocinc customize-note
\section2 Delay and Timeout
Tool tips are typically transient in a sense that they are shown as a
result of a certain external event or user interaction, and they usually
hide after a certain timeout. It is possible to control the delay when
a tool tip is shown, and the timeout when it is hidden. This makes it
possible to implement varying strategies for showing and hiding tool tips.
For example, on touch screens, it is a common pattern to show a tool tip
as a result of pressing and holding down a button. The following example
demonstrates how to delay showing a tool tip until the press-and-hold
interval is reached. In this example, the tool tip hides as soon as the
button is released.
\snippet qtquickcontrols-tooltip-pressandhold.qml 1
With pointer devices, however, it might be desired to show a tool tip as
a result of hovering a button for a while. The following example presents
how to show a tool tip after hovering a button for a second, and hide it
after a timeout of five seconds.
\snippet qtquickcontrols-tooltip-hover.qml 1
\section2 Custom Tool Tips
Should one need more fine-grained control over the tool tip position, or
multiple simultaneous tool tip instances are needed, it is also possible
to create local tool tip instances. This way, it is possible to
\l {Customizing ToolTip}{customize} the tool tip, and the whole \l Popup
API is available. The following example presents a tool tip that presents
the value of a slider when the handle is dragged.
\image qtquickcontrols-tooltip-slider.png
{Tooltip attached to slider showing current value}
\snippet qtquickcontrols-tooltip-slider.qml 1
\sa {Customizing ToolTip}, {Popup Controls},
{QtQuick.Controls::Popup::closePolicy}{closePolicy}
|
23152 |
- |
| qquicktooltip_p.h |
|
4089 |
- |
| qquicktooltip_p_p.h |
|
1961 |
- |
| qquicktreeviewdelegate.cpp |
|
16170 |
- |
| qquicktreeviewdelegate_p.h |
|
3773 |
- |
| qquicktumbler.cpp |
!
\qmltype Tumbler
\inherits Control
//! \nativetype QQuickTumbler
\inqmlmodule QtQuick.Controls
\since 5.7
\ingroup qtquickcontrols-input
\brief Spinnable wheel of items that can be selected.
\image qtquickcontrols-tumbler-wrap.gif
{Tumbler with wrap, looping continuously}
\code
Tumbler {
model: 5
// ...
}
\endcode
Tumbler allows the user to select an option from a spinnable \e "wheel" of
items. It is useful for when there are too many options to use, for
example, a RadioButton, and too few options to require the use of an
editable SpinBox. It is convenient in that it requires no keyboard usage
and wraps around at each end when there are a large number of items.
The API is similar to that of views like \l ListView and \l PathView; a
\l model and \l delegate can be set, and the \l count and \l currentItem
properties provide read-only access to information about the view. To
position the view at a certain index, use \l positionViewAtIndex().
Unlike views like \l PathView and \l ListView, however, there is always a
current item (when the model isn't empty). This means that when \l count is
equal to \c 0, \l currentIndex will be \c -1. In all other cases, it will
be greater than or equal to \c 0.
By default, Tumbler \l {wrap}{wraps} when it reaches the top and bottom, as
long as there are more items in the model than there are visible items;
that is, when \l count is greater than \l visibleItemCount:
\snippet qtquickcontrols-tumbler-timePicker.qml tumbler
\sa {Customizing Tumbler}, {Input Controls}
|
36674 |
- |
| qquicktumbler_p.h |
|
4711 |
- |
| qquicktumbler_p_p.h |
|
3820 |
- |
| qquickvelocitycalculator.cpp |
Usage:
QQuickVelocityCalculator velocityCalculator;
// ...
velocityCalcular.startMeasuring(event->pos(), event->timestamp());
velocityCalcular.stopMeasuring(event->pos(), event->timestamp());
// ...
if (velocityCalculator.velocity().x() > someAmount)
doSomething();
else if (velocityCalculator.velocity().x() < -someAmount)
doSomethingElse();
|
1504 |
- |
| qquickvelocitycalculator_p_p.h |
|
1033 |
- |
| qquickweeknumbercolumn.cpp |
!
\qmltype WeekNumberColumn
\inherits Control
//! \nativetype QQuickWeekNumberColumn
\inqmlmodule QtQuick.Controls
\brief A column of week numbers.
WeekNumberColumn presents week numbers in a column. The week numbers
are calculated for a given \l month and \l year, using the specified
\l {Control::locale}{locale}.
\image qtquickcontrols-weeknumbercolumn.webp
{Week number column displaying week numbers}
\snippet qtquickcontrols-weeknumbercolumn.qml 1
WeekNumberColumn can be used as a standalone control, but it is most
often used in conjunction with MonthGrid. Regardless of the use case,
positioning of the column is left to the user.
\image qtquickcontrols-weeknumbercolumn-layout.webp
{Week number column in calendar layout}
\snippet qtquickcontrols-weeknumbercolumn-layout.qml 1
The visual appearance of WeekNumberColumn can be changed by
implementing a \l {delegate}{custom delegate}.
\sa MonthGrid, DayOfWeekRow
|
6221 |
- |
| qquickweeknumbercolumn_p.h |
|
2058 |
- |
| qquickweeknumbermodel.cpp |
|
3884 |
- |
| qquickweeknumbermodel_p.h |
|
1916 |
- |
| qt_cmdline.cmake |
|
0 |
- |
| qtquicktemplates2global.cpp |
|
1885 |
- |
| qtquicktemplates2global_p.h |
|
1198 |
- |
| qtquicktemplates2math_p.h |
|
811 |
- |
| qtquicktemplates2plugin.cpp |
uri |
2239 |
- |