60
60
\li \l {Layouts - Terminology}{Terminology}
61
\li \l {Layouts - A simple layout}{A simple layout}
61
\li \l {Layouts - The first conditional layout}{The first conditional layout}
62
\li \l {Layouts - Resizing items laid out}{Resizing items laid out}
63
\li \l {Layouts - Changing the order}{Changing the order}
64
\li \l {Layouts - Lay out a single item differently from others}{Lay out a single item differently from others}
65
\li \l {Layouts - Lay out individual items separately}{Lay out individual items separately}
66
\li \l {Layouts - Defining more layouts for different form factors}{Defining more layouts for different form factors}
69
So, let's take them step-by-step...
66
73
\page ubuntu-layouts1.html
67
74
\title Layouts - Terminology
68
\nextpage Layouts - A simple layout
75
\nextpage Layouts - The first conditional layout
70
77
First let's introduce the terminology we are going to use across this tutorial.
137
145
\page ubuntu-layouts2.html
138
\title Layouts - A simple layout
146
\title Layouts - The first conditional layout
147
\nextpage Layouts - Resizing items laid out
140
149
As first let's create the following default layout, with anchored buttons to each other.
141
150
\image default-layout.png
152
Defined by the following code:
153
\snippet layouts/layout1.qml default layout
155
\section1 Walkthrough
157
First of all, in order to use the layouting abilities, you need to import Ubuntu.Layouts.
159
import Ubuntu.Layouts 0.1
162
This layout will have the red button anchored to the parent's left, top and bottom, having
163
a width of 15 grid units. The green and blue buttons are anchored left to the red button,
164
righ to their parent, top and bottom to the parent top rrespectively to the parent bottom
165
and both having a height of 10 grid units.
167
This layout looks good in small form factors, however as the width, height and grid unit
168
changes, this layout will start to look cumbersome.
170
\section2 Define the conditional layout
171
Let's define a column layout for the case when the layout block width passes 50 GU, and
172
move the items into a \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-row.html}{Row}
173
container in the following order: "red", "green" and "blue". We embedd the positioner
174
into a \l{http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-flickable.html}{Flickable}
175
so we can still access the components positioned in case the content is not fit with the
177
\snippet layouts/layout1.qml row layout
179
Note the way the container is defined. ConditionalLayout.items attached property lists
180
the items to be hosted (laid out) and the order of the items of those.
182
Combining this with the default layout we will see the following layout when width exceeds
185
\snippet layouts/layout1.qml 0
187
As you can see the blue button is not visible whan the row layout is activated. In fact
188
the blue button will never be shown when the row layout gets activated, as both green and
189
blue buttons being anchored right to their parent and left to the red button, they will
190
get the width of the last time they have neen still in the default layout. This may be
191
the desired behavior, however it may also look clumsy. Let's see how can we circumvent that.
195
\page ubuntu-layouts3.html
196
\title Layouts - Resizing items laid out
197
\nextpage Layouts - Changing the order
199
So, let's take the layout we did so far in \l{Layouts - The first conditional layout}{The first conditional layout}
200
and define the width of each item to be one third of the layout's width. We can do this by
201
defining the ConditionalLayout.width attached property, which will be applied to each item
202
listed in the ConditionalLayout.items attached property.
203
\snippet layouts/layout2.qml row layout
206
Similar thing can be done with the height by defining the value or expression in
207
ConditionalLayout.height attached property. Note that this property will also be applied
208
to each item hosted by the container.
210
The entire code will look as follows:
211
\snippet layouts/layout2.qml 0
216
\page ubuntu-layouts4.html
217
\title Layouts - Changing the order
218
\nextpage Layouts - Lay out a single item differently from others
220
So far we have seen how to define the defaul tlayout, a conditional layout and how to resize
223
As mentioned in ConditionalLayout documentation, items hosted by the container are laid
224
out based on the order they are specified in the ConditionalLayout.items attached property.
226
To illustrate this, let's change the order of the buttons so that we have blue, red and green
229
\snippet layouts/layout3.qml row layout
230
The layout after resizing the window width to exceed 50 GU will look as follows:
233
Note that when resizing the window width to < 50 GU, you will get all your components back to
234
their original (default) positions.
236
The layout has the red button with a different height than the other two. This is because the
237
height is "inherited" from the time they were transferred from the default layout. But what if
238
I want to have one of the butons to be of a different size than the others? Or what if I want
239
to have each of them to hav edifferent sizes? The following chapters will show how to do this.
243
\page ubuntu-layouts5.html
244
\title Layouts - Lay out a single item differently from others
245
\nextpage Layouts - Lay out individual items separately
246
Let's create a layout where the blue button has a different size than the other two. We can
247
achieve this by using ItemLayout component to host the blue button. Let's also resize the other
248
biuttons to hav ethe same width and height.
249
The code will look as follows:
250
\snippet layouts/layout4.qml row layout
255
\page ubuntu-layouts6.html
256
\title Layouts - Lay out individual items separately
257
\nextpage Layouts - Defining more layouts for different form factors
261
\page ubuntu-layouts7.html
262
\title Layouts - Defining more layouts for different form factors
added
removed
modules/Ubuntu/Layouts/ubuntu-layouts.qdoc
