Rectangle QML Type

Pinta un rectángulo relleno con un borde opcional. Más...

• Lista de todos los miembros, incluidos los heredados

Propiedades

• antialiasing : bool
• border
  • border.color : color
  • border.pixelAligned : bool
  • border.width : int
• bottomLeftRadius : real (since 6.7)
• bottomRightRadius : real (since 6.7)
• color : color
• gradient : var
• radius : real
• topLeftRadius : real (since 6.7)
• topRightRadius : real (since 6.7)

Descripción detallada

Los elementos rectángulo se utilizan para rellenar áreas con color sólido o degradados, y/o para proporcionar un borde rectangular.

Aspecto

Cada elemento Rectángulo se pinta utilizando un color sólido de relleno, especificado mediante la propiedad color, o un gradiente, definido mediante un tipo de Gradiente y establecido mediante la propiedad gradient. Si se especifica tanto un color como un degradado, se utiliza el degradado.

Puede añadir un borde opcional a un rectángulo con su propio color y grosor estableciendo las propiedades border.color y border.width. Establezca el color en "transparente" para pintar un borde sin color de relleno.

También puede crear rectángulos redondeados utilizando la propiedad radius. Dado que esto introduce bordes curvos en las esquinas de un rectángulo, puede ser conveniente establecer la propiedad Item::antialiasing para mejorar su apariencia. Para establecer los radios individualmente para diferentes esquinas, puede utilizar las propiedades topLeftRadius, topRightRadius, bottomLeftRadius y bottomRightRadius.

Ejemplo de uso

El siguiente ejemplo muestra los efectos de algunas de las propiedades comunes en un elemento Rectángulo, que en este caso se utiliza para crear un cuadrado:

import QtQuick

Rectangle {
    width: 100
    height: 100
    color: "red"
    border.color: "black"
    border.width: 5
    radius: 10
}

Propiedades

El uso de la propiedad Item::antialiasing mejora la apariencia de un rectángulo redondeado a costa del rendimiento de renderizado. Deberías considerar desactivar esta propiedad para rectángulos en movimiento, y sólo activarla cuando estén estacionarios.

Véase también Image.

Documentación de la propiedad

antialiasing : bool

Se utiliza para decidir si el Rectángulo debe utilizar antialiasing o no. Antialiasing proporciona información sobre las implicaciones de rendimiento de esta propiedad.

Por defecto es true para Rectángulos con radio, y false en caso contrario.

border group

La anchura y el color utilizados para dibujar el borde del rectángulo.

Una anchura de 1 crea una línea fina. Para que no haya línea, utilice una anchura de 0 o un color transparente.

El borde se representa dentro de los límites del rectángulo.

Si pixelAligned es true (por defecto), la anchura del borde se redondea a un número entero de píxeles, después de escalar la relación de píxeles del dispositivo. Establecer pixelAligned a false permitirá anchos de borde fraccionarios, lo que puede ser deseable cuando antialiasing está habilitado.

bottomLeftRadius : real [since 6.7]

Esta propiedad contiene el radio utilizado para dibujar la esquina inferior izquierda.

Si no se define bottomLeftRadius, se utilizará radius en su lugar. Si bottomLeftRadius es cero, la esquina será afilada.

Esta propiedad se introdujo en Qt 6.7.

Véase también radius, topLeftRadius, topRightRadius, y bottomRightRadius.

bottomRightRadius : real [since 6.7]

Esta propiedad contiene el radio utilizado para dibujar la esquina inferior derecha.

Si no se establece bottomRightRadius, se utilizará radius en su lugar. Si bottomRightRadius es cero, la esquina será afilada.

Esta propiedad se introdujo en Qt 6.7.

Véase también radius, topLeftRadius, topRightRadius, y bottomLeftRadius.

color : color

Esta propiedad contiene el color utilizado para rellenar el rectángulo.

El color por defecto es el blanco.

El siguiente ejemplo muestra rectángulos con colores especificados utilizando notación hexadecimal y de color con nombre:

Rectangle {
    color: "#00B000"
    width: 80; height: 80
}

Rectangle {
    color: "steelblue"
    y: 100; width: 80; height: 80
}

Si se especifica tanto un gradiente como un color, se utilizará el gradiente.

Véase también gradient.

gradient : var

El degradado a utilizar para rellenar el rectángulo.

Esta propiedad permite construir gradientes verticales u horizontales simples. Se pueden formar otros degradados añadiendo rotación al rectángulo.

Rectangle {
    width: 80; height: 80
    color: "lightsteelblue"
}

Rectangle {
    width: 80; height: 80
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

Rectangle {
    width: 80; height: 80
    gradient: Gradient {
        orientation: Gradient.Horizontal
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

Rectangle {
    width: 80; height: 80
    rotation: 90
    gradient: Gradient {
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 1.0; color: "blue" }
    }
}

La propiedad también acepta preajustes de degradado de QGradient::Preset. Tenga en cuenta, sin embargo, que debido a que Rectangle sólo admite degradados verticales u horizontales simples, cualquier preajuste con un ángulo no admitido volverá a la representación más cercana.

Rectangle {
    width: 80; height: 80
    gradient: Gradient.NightFade
}

Rectangle {
    width: 80; height: 80
    gradient: "SunnyMorning"
}

Si se especifica tanto un gradiente como un color, se utilizará el gradiente.

Véase también Gradient y color.

radius : real

Esta propiedad contiene el radio de la esquina utilizado para dibujar un rectángulo redondeado.

Si el radio es distinto de cero, el rectángulo se pintará como un rectángulo redondeado, de lo contrario se pintará como un rectángulo normal. También se pueden establecer radios de esquinas individuales (ver más abajo). Estos valores anulan el radio. Si no se definen (definiéndolos como undefined), se utilizará el radio en su lugar.

Véase también topLeftRadius, topRightRadius, bottomLeftRadius, y bottomRightRadius.

topLeftRadius : real [since 6.7]

Esta propiedad contiene el radio utilizado para dibujar la esquina superior izquierda.

Si no se establece topLeftRadius, se utilizará radius en su lugar. Si topLeftRadius es cero, la esquina será afilada.

Esta propiedad se introdujo en Qt 6.7.

Véase también radius, topRightRadius, bottomLeftRadius, y bottomRightRadius.

topRightRadius : real [since 6.7]

Esta propiedad contiene el radio utilizado para dibujar la esquina superior derecha.

Si no se establece topRightRadius, se utilizará radius en su lugar. Si topRightRadius es cero, la esquina será afilada.

Esta propiedad se introdujo en Qt 6.7.

Véase también radius, topLeftRadius, bottomLeftRadius, y bottomRightRadius.