blob: 7c204fc5b490d85b5ee05a4172893a69e5bcd3cf (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\title Qt Quick Layouts - Responsive Layout Example
\example responsivelayouts
\brief Demonstrates how to use LayoutItemProxy to make a responsive UI.
\ingroup qtquickexamples
\examplecategory {User Interface Components}
This example shows how to use LayoutProxyItems in combination with
\l{Qt Quick Layouts}{layouts} to create responsive layouts.
\include examples-run.qdocinc
\section1 Creating items
The \l {LayoutItemProxy} type allows to use the same item in different
layouts, although only one layout can be visible at the same time. This
can be used to create responsive layouts that adapt to the window or
screen size.
\image qtquicklayouts-example-responsivelayouts.png
First we need to define all items that should appear in or UI at some point.
We use a AnnotatedRect, which is a simple Rectangle with some added text.
\snippet responsivelayouts/responsivelayouts.qml item definition
\section1 Creating layouts
We can now declare various layouts using \l {LayoutItemProxy}{LayoutItemProxies},
targeting the previously declare items. A single layout can be defined as follows.
\snippet responsivelayouts/responsivelayouts.qml first layout
This snippet shows multiple ways to use the \l {LayoutItemProxy}.
The simplest method is to add \l {LayoutItemProxy}{LayoutItemProxies}
to a Layout like the RowLayout here. In addition we set an additional
\l {Layout} attached property to the LayoutProxyItem that will affect
the target item only in this particular layout. Further, we see that the
item \c {d} is not used in the first layout. Then it is automatically
hidden by the \l {LayoutItemProxy} in the second layout.
Another way of using it is shown by setting a \l {LayoutItemProxy} as
the content of a \l {Flickable}.
Another layout is declared as follows.
\snippet responsivelayouts/responsivelayouts.qml second layout
Here we show that \l {LayoutItemProxy}{LayoutItemProxies} can be used
together with real \l {Item}{Items} on the same hierarchy level. Generally,
the \l {LayoutItemProxy} is flexible and allows nested structures of
items and layouts.
\section1 Setting the layout
After two layouts, \c {smallLayout} and \c {largeLayout} are defined,
we can continue with setting the layout that fits to the current size of
the application. We define a new function for this code that we call
when the window is initialized and whenever the width changes:
\snippet responsivelayouts/responsivelayouts.qml setting the layout
Alternatively to calling this function after initialization we can hide all
but the correct layout for the initial size in the declarative code.
*/
|
