<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- tutorial.qdoc -->
<title>QML Tutorial 2 - QML Components | Qt Quick 5.12.6</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.12</td><td ><a href="qtquick-index.html">Qt Quick</a></td><td >QML Tutorial 2 - QML Components</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.6 Reference Documentation</a></td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<link rel="prev" href="qml-tutorial1.html" />
<link rel="next" href="qml-tutorial3.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="qml-tutorial1.html">QML Tutorial 1 - Basic Types</a>
<span class="naviSeparator"> ◦ </span>
<a class="nextPage" href="qml-tutorial3.html">QML Tutorial 3 - States and Transitions</a>
</p><p/>
<div class="sidebar">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#walkthrough">Walkthrough</a></li>
<li class="level2"><a href="#the-cell-component">The Cell Component</a></li>
<li class="level2"><a href="#the-main-qml-file">The Main QML File</a></li>
</ul>
</div>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">QML Tutorial 2 - QML Components</h1>
<span class="subtitle"></span>
<!-- $$$qml-tutorial2.html-description -->
<div class="descr"> <a name="details"></a>
<p>This chapter adds a color picker to change the color of the text.</p>
<p class="centerAlign"><img src="images/declarative-tutorial2.png" alt="" /></p><p>Our color picker is made of six cells with different colors. To avoid writing the same code multiple times for each cell, we create a new <code>Cell</code> component. A component provides a way of defining a new type that we can re-use in other QML files. A QML component is like a black-box and interacts with the outside world through properties, signals and functions and is generally defined in its own QML file. (For more details, see the Component documentation). The component's filename must always start with a capital letter.</p>
<p>Here is the QML code for <code>Cell.qml</code>:</p>
<pre class="qml">
import QtQuick 2.0
Item {
id: container
property alias cellColor: rectangle.color
signal clicked(color cellColor)
width: 40; height: 25
Rectangle {
id: rectangle
border.color: "white"
anchors.fill: parent
}
MouseArea {
anchors.fill: parent
onClicked: container.clicked(container.cellColor)
}
}
</pre>
<a name="walkthrough"></a>
<h2 id="walkthrough">Walkthrough</h2>
<a name="the-cell-component"></a>
<h3 id="the-cell-component">The Cell Component</h3>
<pre class="qml">
Item {
id: container
property alias cellColor: rectangle.color
signal clicked(color cellColor)
width: 40; height: 25
</pre>
<p>The root type of our component is an <a href="qml-qtquick-item.html">Item</a> with the <code>id</code> <i>container</i>. An <a href="qml-qtquick-item.html">Item</a> is the most basic visual type in QML and is often used as a container for other types.</p>
<pre class="qml">
property alias cellColor: rectangle.color
</pre>
<p>We declare a <code>cellColor</code> property. This property is accessible from <i>outside</i> our component, this allows us to instantiate the cells with different colors. This property is just an alias to an existing property - the color of the rectangle that compose the cell (see Property Binding).</p>
<pre class="qml">
signal clicked(color cellColor)
</pre>
<p>We want our component to also have a signal that we call <i>clicked</i> with a <i>cellColor</i> parameter of type <i>color</i>. We will use this signal to change the color of the text in the main QML file later.</p>
<pre class="qml">
Rectangle {
id: rectangle
border.color: "white"
anchors.fill: parent
}
</pre>
<p>Our cell component is basically a colored rectangle with the <code>id</code> <i>rectangle</i>.</p>
<p>The <code>anchors.fill</code> property is a convenient way to set the size of a visual type. In this case the rectangle will have the same size as its parent (see <a href="qtquick-positioning-anchors.html">Anchor-Based Layout</a>).</p>
<pre class="qml">
MouseArea {
anchors.fill: parent
onClicked: container.clicked(container.cellColor)
}
</pre>
<p>In order to change the color of the text when clicking on a cell, we create a <a href="qml-qtquick-mousearea.html">MouseArea</a> type with the same size as its parent.</p>
<p>A <a href="qml-qtquick-mousearea.html">MouseArea</a> defines a signal called <i>clicked</i>. When this signal is triggered we want to emit our own <i>clicked</i> signal with the color as parameter.</p>
<a name="the-main-qml-file"></a>
<h3 id="the-main-qml-file">The Main QML File</h3>
<p>In our main QML file, we use our <code>Cell</code> component to create the color picker:</p>
<pre class="qml">
import QtQuick 2.0
Rectangle {
id: page
width: 320; height: 480
color: "lightgray"
Text {
id: helloText
text: "Hello world!"
y: 30
anchors.horizontalCenter: page.horizontalCenter
font.pointSize: 24; font.bold: true
}
Grid {
id: colorPicker
x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4
rows: 2; columns: 3; spacing: 3
Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
Cell { cellColor: "green"; onClicked: helloText.color = cellColor }
Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }
Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }
Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }
Cell { cellColor: "black"; onClicked: helloText.color = cellColor }
}
}
</pre>
<p>We create the color picker by putting 6 cells with different colors in a grid.</p>
<pre class="qml">
Cell { cellColor: "red"; onClicked: helloText.color = cellColor }
</pre>
<p>When the <i>clicked</i> signal of our cell is triggered, we want to set the color of the text to the <i>cellColor</i> passed as a parameter. We can react to any signal of our component through a property of the name <i>'onSignalName'</i> (see Signal Attributes).</p>
</div>
<!-- @@@qml-tutorial2.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="qml-tutorial1.html">QML Tutorial 1 - Basic Types</a>
<span class="naviSeparator"> ◦ </span>
<a class="nextPage" href="qml-tutorial3.html">QML Tutorial 3 - States and Transitions</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd.
Documentation contributions included herein are the copyrights of
their respective owners.<br/> The documentation provided herein is licensed under the terms of the <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation License version 1.3</a> as published by the Free Software Foundation.<br/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
distrib
>
Mageia
>
7
>
i586
>
media
>
core-updates
>
by-pkgid
>
6e2327ca1c896c6d674ae53117299f21
>
files
>
1219
