qtquick-screens.qdoc 16.9 KB
Newer Older
1 2
3 4
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
** This file is part of the Qt Creator documentation.
8 9 10 11 12 13 14
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
** GNU Free Documentation License Usage
17 18
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
19 20 21 22
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
23 24 25 26 27 28 29 30 31 32 33

// **********************************************************************
// NOTE: the sections are not ordered by their logical order to avoid
// reshuffling the file each time the index order changes (i.e., often).
// Run the fixnavi.pl script to adjust the links to the index order.
// **********************************************************************


    \contentspage {Qt Creator Manual}
35 36
    \previouspage quick-scalable-image.html
    \page quick-screens.html
    \nextpage qtquick-iso-icon-browser.html
38 39 40

    \title Creating Screens

    You can use predefined QML types and your own components to create
42 43 44
    screens. Typically, the main qml file in a Qt Quick project specifies the
    main window of an application.

45 46
    The QML files in the project folder are displayed in \uicontrol {QML Components}
    in the \uicontrol Library.

48 49
    You can also use ready-made Qt Quick 1 Components (for Qt 4) to create
    screens with a native look and feel for a particular target platform.
50 51 52
    Since Qt 5.1, Qt Quick Controls, Dialogs, and Layouts are available for
    creating classic desktop-style user interfaces using Qt Quick 2.1. You can
    use the Qt Quick Controls Styles to customize Qt Quick Controls.

54 55 56 57 58 59
    Since Qt 5.6, Qt Labs Controls provide lightweight QML types for creating
    performant user interfaces for embedded and mobile devices. These controls
    achieve improved efficiency by employing a simplified styling architecture
    when compared to Qt Quick Controls, on which the module is based. These
    types work in conjunction with Qt Quick and Qt Quick Layouts.

60 61 62 63
    \section1 Adding Components to Screens

    \list 1

        \li Drag and drop components from the \uicontrol Library to the editor.

66 67
        \li Select components in the \uicontrol Navigator to edit their
            properties in the \uicontrol Properties pane.
68 69 70 71 72 73 74 75 76

            For example, you can anchor components to a position on the screen.


    \section1 Using Data Models

    You can create the following types of views to organize items provided by
    \l{Models and Views in Qt Quick}{data models}:
78 79 80


        \li GridView provides a grid vizualization of a model.

        \li ListView provides a list vizualization of a model.

        \li PathView visualizes the contents of a model along a path.
86 87 88


    When you add a GridView, ListView, or PathView, the ListModel and the
    delegate component that creates an instance for each item in the model are
    added automatically. You can edit item properties
    in the \uicontrol Properties pane or
93 94 95 96 97
    in the code editor. You can also replace the default model and
    delegate with other, more complex models and delegates in the code editor.

    \section1 Positioning Items on Screens

98 99
    The position of an item on the canvas can be either absolute or relative
    to other items. If you are designing a static user interface,
    \l{Important Concepts In Qt Quick - Positioning#manual-positioning}
101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120
    {manual positioning} provides the most efficient form of positioning items
    on the screen. For a dynamic user interface, you can employ the following
    positioning methods provided by Qt Quick:


        \li \l{Setting Bindings}

        \li \l{Setting Anchors and Margins}

        \li \l{Using Positioners}

        \li \l{Using Layouts}

        \li \l{Using Split Views}


    \section2 Setting Bindings

    \l{Positioning with Bindings}
    {Property binding} is a declarative way of specifying the value of a property.
    Binding allows a property value to be expressed as a JavaScript expression
124 125 126 127 128 129 130
    that defines the value relative to other property values or data accessible
    in the application. The property value is automatically kept up to date if
    the other properties or data values change.

    Property bindings are created implicitly in QML whenever a property is
    assigned a JavaScript expression. To set JavaScript expressions as values of
    properties in \QMLD, click the circle icon next to a property to open a
    context menu, and select \uicontrol {Set Binding}.
132 133 134

    \image qmldesigner-set-expression.png "Type properties context menu"

    To remove bindings, select \uicontrol Reset in the context menu.
136 137

    For more information on the JavaScript environment provided by QML, see
    \l{Integrating QML and JavaScript}.
139 140 141 142 143 144 145 146

    \QMLD cannot show bindings and using them might have a negative impact on
    performance, so consider setting anchors and margins for items, instead.
    For example, instead of setting \c {parent.width} for an item, you could
    anchor the item to its sibling items on the left and the right.

    \section2 Setting Anchors and Margins

    In an \l{Important Concepts In Qt Quick - Positioning#anchors}
148 149 150 151
    {anchor-based} layout, each QML type can be thought of as having a set of
    invisible \e anchor lines: top, bottom, left, right, fill, horizontal
    center, vertical center, and baseline.

    In the \uicontrol Layout pane you can set anchors and margins for items. To set
153 154 155 156 157 158 159 160 161 162 163 164
    the anchors of an item, click the anchor buttons. You can combine the
    top/bottom, left/right, and horizontal/vertical anchors to anchor items in
    the corners of the parent item or center them horizontally or vertically
    within the parent item.

    \image qmldesigner-anchor-buttons.png "Anchor buttons"

    Specifying the baseline anchor in \QMLD is not supported. You can specify it
    using the code editor.

    For performance reasons, you can only anchor an item to its siblings and
    direct parent. By default, an item is anchored to its parent when you
    use the anchor buttons. Select a sibling of the item in the \uicontrol Target
166 167 168 169 170 171 172 173 174
    field to anchor to it, instead.

    Arbitrary anchoring is not supported. For example, you cannot specify:
    \c {anchor.left: parent.right}. You have to specify: \c {anchor.left: parent.left}.
    When you use the anchor buttons, anchors to the parent item are always
    specified to the same side. However, anchors to sibling items are specified
    to the opposite side: \c {anchor.left: sibling.right}. This allows you to keep
    sibling items together.

    In the following image, \uicontrol{Rectangle 2} is anchored to \uicontrol{Rectangle 1}
176 177 178 179
    on its left and to the bottom of its parent.

    \image qmldesigner-anchors.png "Anchoring sibling items"

    The anchors for \uicontrol{Rectangle 2} are specified as follows in code:
181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198

    Rectangle {
        id: rectangle2
        anchors.left: rectangle1.right
        anchors.leftMargin: 15
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 15

    Margins specify the amount of empty space to leave to the outside of an item.
    Margins only have meaning for anchors. They do not take any effect when using
    other layouts or absolute positioning.

    \section2 Using Positioners

    \l{Important Concepts In Qt Quick - Positioning#positioners}
200 201 202 203 204 205
    {Positioner items} are container items that manage the positions of items in
    a declarative user interface. Positioners behave in a similar way to the
    layout managers used with standard Qt widgets, except that they are also
    containers in their own right.

    You can use the following positioners to arrange items on screens:
206 207 208


        \li \l{Column} arranges its child items vertically.

        \li \l{Row} arranges its child items horizontally.

        \li \l{Grid}
214 215 216
            arranges its child items so that they are aligned in a grid and
            are not overlapping.

        \li \l{Flow}
218 219 220 221
            arranges its child items side by side, wrapping as necessary.


    To lay out several items in a Column, Row, Grid, or Flow, select
    the items on the canvas, and then select \uicontrol Layout in the context
224 225

226 227
    \section2 Using Layouts

228 229 230
    From Qt 5.1, you can use QML types in the \l{qtquicklayouts-index.html}
    {Qt Quick Layouts} module to arrange Qt Quick items on screens. Unlike
    positioners, they manage both the positions and sizes of items in a
231 232 233 234 235 236
    declarative interface. They are well suited for resizable user interfaces.

    You can use the following layout types to arrange items on screens:


        \li \l{Layout} provides attached properties for items pushed onto a
            \uicontrol {Column Layout}, \uicontrol {Row Layout}, or \uicontrol {Grid Layout}.

        \li ColumnLayout provides a grid layout with only one column.

        \li RowLayout provides a grid layout with only one row.

        \li GridLayout provides a way of dynamically arranging items in a
245 246 247 248


249 250 251
    To lay out several items in a \uicontrol {Column Layout}, \uicontrol {Row Layout}, or
    \uicontrol {Grid Layout}, select the items on the canvas, and then select
    \uicontrol Layout in the context menu.
252 253 254

    To make an item within a layout as wide as possible while respecting the
    given constraints, select the item on the canvas and then select
255 256
    \uicontrol Layout > \uicontrol {Fill Width} in the context menu. To make the item as
    high as possible, select \uicontrol {Fill Height}.
257 258 259

    \section2 Using Split Views

260 261
    From Qt 5.1, you can use the SplitView Qt Quick Control to arrange items
    horizontally or vertically
262 263 264
    with a draggable splitter between each item.

265 266 267 268 269
    \section1 Using States

    Use states and transitions to navigate between screens.

    QML states typically describe user interface configurations, such as the UI
    controls, their properties and behavior and the available actions. For
271 272
    example, you can use states to create two screens.

    To add states, click the empty slot in the \uicontrol States pane. Then modify the
274 275 276 277 278 279 280 281 282
    new state in the visual editor.

    \image qmldesigner-states.png "States pane"

    The properties that you change in a state are highlighted with blue color.
    In the code editor, you can see the changes recorded as changes to the base

    To keep the QML code clean, you should create a base state that contains all
    the types you will need in the application. You can then create states,
284 285 286 287 288
    in which you hide and show a set of items and modify their properties.
    This allows you to:


        \li Align items on different screens with each other.

        \li Avoid excessive property changes. If an item is invisible in the
            base state, you must define all changes to its child types as
293 294
            property changes, which leads to complicated QML code.

        \li Minimize the differences between the base state and the other states
296 297
            to keep the QML code short and readable and to improve performance.

        \li Avoid problems when using transitions and animation when changing
299 300 301 302 303 304 305 306


    To create screens for an application by using states:

    \list 1

        \li In the base state, add all items you will need in the
Leena Miettinen's avatar
Leena Miettinen committed
            application (1).
            While you work on one screen, you can click the
            \inlineimage eye_open.png
            icon to hide items on the canvas that are not part of a screen.

        \li In the \uicontrol States pane, click the empty slot to create a new state
314 315
            and give it a name. For example, \c Normal.

316 317
        \li In the \uicontrol Properties pane (2), deselect the \uicontrol Visibility check box
            or set \uicontrol Opacity to 0 for each item that is not needed in this
318 319
            view. If you specify the setting for the parent item, all child
            items inherit it and are also hidden.
320 321 322

            \image qmldesigner-screen-design.png "Designing screens"

        \li Create additional states for each screen and set the visibility
            or opacity of the items in the screen.

        \li To determine which view opens when the application starts, use the
327 328 329 330 331 332 333 334 335 336 337
            code editor to set the state of the root item of the .qml file, as
            specified by the following code snippet:

            Item {
                state: "Normal"


    \section1 Animating Screens
339 340 341 342 343

    To make movement between states smooth, you can specify transitions. You can
    use different types of animated transitions. For example, you can animate
    changes to property values and colors. You can use rotation animation to
    control the direction of rotation. For more information, see
    \l{Animation and Transitions in Qt Quick}.

346 347
    You can use the \c ParallelAnimation type to start several animations at
    the same time. Or use the \c SequentialAnimation type to run them one
348 349 350
    after another.

    You can use the code editor to specify transitions. For more information,
    see \l{Transition}.

    \section1 Adding User Interaction Methods

355 356
    You can use the following QML types to add basic interaction methods to
357 358 359


        \li \l{Flickable}
361 362
            items can be flicked horizontally or vertically.

        \li FocusScope
364 365 366
            assists in keyboard focus handling when building reusable QML

        \li MouseArea enables simple mouse handling.
368 369 370


    From Qt 5.1, you can also use the following
    \l{Qt Quick Controls} to present or receive input from the user:
373 374 375


        \li \l{Button} provides a push button that you can associate with an
377 378

        \li CheckBox provides an option button that can be toggled on
380 381
            (checked) or off (unchecked).

        \li ComboBox provides a drop-down list. Add items to the combo box by
383 384 385
            assigning it a ListModel, or a list of strings to the model

        \li GroupBox provides a frame, a title on top, and place for various
387 388
            other controls inside the frame.

        \li \l{Label} provides a text label that follows the font and color scheme
390 391
            of the system.

        \li ProgressBar indicates the progress of an operation.

        \li RadioButton provides an option button that can be switched on
395 396
            (checked) or off (unchecked).

        \li \l{Slider}
398 399 400 401
            {Slider (Horizontal) and Slider (Vertical)} enable the user to move
            a slider handle along a horizontal or vertical groove and translate
            the handle's position into a value within the specified range.

        \li SpinBox enables the user to specify a value by clicking the up or
403 404 405
            down buttons, by pressing up or down on the keyboard, or by entering
            a value in the box.

406 407
        Not visible in the item library in 3.2.
        \li StatusBar contains status information in your application. It
            does not provide a layout of its own, but requires you to position
            its contents, for instance by creating a \uicontrol {Row Layout}.

        \li TextArea displays multiple lines of editable formatted text.

        \li TextField displays a single line of editable plain text.

417 418
        Not visible in the item library in 3.2.
        \li ToolBar provides styling for ToolButton as well as other controls
420 421
            that it can contain. However, it does not provide a layout of its
            own, but requires you to position its contents, for instance by
            creating a \uicontrol {Row Layout}.

        \li ToolButton provides a button that is functionally similar to
            \uicontrol Button, but that looks more suitable on a \uicontrol {Tool Bar}.
427 428 429 430


431 432 433 434
    \section1 Implementing Application Logic

    A user interface is only a part of an application, and not really useful by itself.
    You can use Qt or JavaScript to implement the application logic. For more information on
    using JavaScript, see \l{Integrating QML and JavaScript}.
436 437

    For an example of how to use JavaScript to develop a game, see the
    \l{QML Advanced Tutorial}.