Tutorial QML 2 - Componentes QML

Este capítulo añade un selector de color para cambiar el color del texto.

Nuestro selector de color se compone de seis celdas con diferentes colores. Para evitar escribir el mismo código varias veces para cada celda, creamos un nuevo componente Cell. Un componente proporciona una forma de definir un nuevo tipo que podemos reutilizar en otros archivos QML. Un componente QML es como una caja negra e interactúa con el mundo exterior a través de propiedades, señales y funciones, y generalmente se define en su propio archivo QML. (Para más detalles, consulte la documentación de Component ). El nombre de archivo del componente debe empezar siempre por mayúscula.

A continuación se muestra el código QML de Cell.qml:

import QtQuick

Item {
    id: container
    property alias cellColor: rectangle.color
    signal clicked(cellColor: color)

    width: 40; height: 25

    Rectangle {
        id: rectangle
        border.color: "white"
        anchors.fill: parent
    }

    MouseArea {
        anchors.fill: parent
        onClicked: container.clicked(container.cellColor)
    }
}

Recorrido

El componente Cell

Item {
    id: container
    property alias cellColor: rectangle.color
    signal clicked(cellColor: color)

    width: 40; height: 25

El tipo raíz de nuestro componente es un Item con el contenedor id. Un Item es el tipo visual más básico en QML y se utiliza a menudo como contenedor de otros tipos.

    property alias cellColor: rectangle.color

Declaramos una propiedad cellColor. Esta propiedad es accesible desde fuera de nuestro componente, esto nos permite instanciar las celdas con diferentes colores. Esta propiedad es sólo un alias de una propiedad existente - el color del rectángulo que compone la celda (ver Property Binding).

    signal clicked(cellColor: color)

Queremos que nuestro componente tenga también una señal que llamaremos clicked con un parámetro cellColor de tipo color. Utilizaremos esta señal para cambiar el color del texto en el archivo QML principal más adelante.

    Rectangle {
        id: rectangle
        border.color: "white"
        anchors.fill: parent
    }

Nuestro componente cell es básicamente un rectángulo de color con el rectángulo id.

La propiedad anchors.fill es una forma conveniente de establecer el tamaño de un tipo visual. En este caso el rectángulo tendrá el mismo tamaño que su padre (ver Anchor-Based Layout).

    MouseArea {
        anchors.fill: parent
        onClicked: container.clicked(container.cellColor)
    }

Para cambiar el color del texto al hacer clic en una celda, creamos un tipo MouseArea con el mismo tamaño que su padre.

Un MouseArea define una señal llamada clicked. Cuando esta señal se dispara queremos emitir nuestra propia señal clicked con el color como parámetro.

El archivo QML principal

En nuestro archivo QML principal, usamos nuestro componente Cell para crear el selector de color:

import QtQuick

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 }
    }
}

Creamos el selector de color colocando 6 celdas con diferentes colores en una cuadrícula.

        Cell { cellColor: "red"; onClicked: helloText.color = cellColor }

Cuando se activa la señal de clic de nuestra celda, queremos establecer el color del texto al cellColor pasado como parámetro. Podemos reaccionar a cualquier señal de nuestro componente a través de una propiedad de nombre 'onSignalName' (ver Atributos de Señal).