Rectangle QML Type

Zeichnet ein ausgefülltes Rechteck mit einem optionalen Rahmen. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• 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)

Ausführliche Beschreibung

Rechteck-Elemente werden verwendet, um Bereiche mit einer Volltonfarbe oder Farbverläufen zu füllen und/oder einen rechteckigen Rahmen zu erzeugen.

Darstellung

Jedes Rechteck-Element wird entweder mit einer einheitlichen Füllfarbe, die über die Eigenschaft „ color “ festgelegt wird, oder mit einem Farbverlauf gezeichnet, der über einen Verlaufstyp definiert und über die Eigenschaft „ gradient “ festgelegt wird. Wenn sowohl eine Farbe als auch ein Farbverlauf angegeben sind, wird der Farbverlauf verwendet.

Sie können einem Rechteck optional einen Rahmen mit eigener Farbe und Dicke hinzufügen, indem Sie die Eigenschaften „ border.color “ und „ border.width “ festlegen. Setzen Sie die Farbe auf „transparent“, um einen Rahmen ohne Füllfarbe zu zeichnen.

Mit der Eigenschaft „ radius “ können Sie auch abgerundete Rechtecke erstellen. Da dadurch die Ecken des Rechtecks abgerundet werden, kann es sinnvoll sein, die Eigenschaft „ Item::antialiasing “ festzulegen, um das Erscheinungsbild zu verbessern. Um die Radien für verschiedene Ecken individuell festzulegen, können Sie die Eigenschaften „ topLeftRadius “, „ topRightRadius “, „ bottomLeftRadius “ und „ bottomRightRadius “ verwenden.

Anwendungsbeispiel

Das folgende Beispiel zeigt die Auswirkungen einiger gängiger Eigenschaften auf ein „Rectangle“-Element, das in diesem Fall zur Erstellung eines Quadrats verwendet wird:

import QtQuick

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

Leistung

Die Verwendung der Eigenschaft „ Item::antialiasing “ verbessert das Erscheinungsbild eines abgerundeten Rechtecks, beeinträchtigt jedoch die Rendering-Leistung. Sie sollten in Betracht ziehen, diese Eigenschaft für sich bewegende Rechtecke zu deaktivieren und sie nur zu aktivieren, wenn diese stillstehen.

Siehe auch „ Image “.

Eigenschaftsdokumentation

antialiasing : bool

Wird verwendet, um festzulegen, ob für das Rechteck Antialiasing verwendet werden soll oder nicht. Antialiasing liefert Informationen zu den Auswirkungen dieser Eigenschaft auf die Leistung.

Die Standardeinstellung ist „true“ für Rechtecke mit einem Radius und andernfalls „false“.

border group

Die Breite und die Farbe, die zum Zeichnen des Rahmens des Rechtecks verwendet werden.

Eine Breite von 1 erzeugt eine dünne Linie. Um keine Linie zu zeichnen, verwenden Sie eine Breite von 0 oder eine transparente Farbe.

Der Rahmen wird innerhalb der Begrenzungen des Rechtecks dargestellt.

Wenn „ pixelAligned “ auf „ true “ gesetzt ist (Standardeinstellung), wird die gerenderte Rahmenbreite nach der Skalierung gemäß dem Geräte-Pixelverhältnis auf eine ganze Zahl von Pixeln gerundet. Wenn Sie „ pixelAligned “ auf „ false “ setzen, sind gebrochene Rahmenbreiten zulässig, was wünschenswert sein kann, wenn „ antialiasing “ aktiviert ist.

bottomLeftRadius : real [since 6.7]

Diese Eigenschaft enthält den Radius, der zum Zeichnen der unteren linken Ecke verwendet wird.

Wenn „bottomLeftRadius“ nicht festgelegt ist, wird stattdessen „ radius “ verwendet. Ist „bottomLeftRadius“ gleich Null, wird die Ecke scharf dargestellt.

Diese Eigenschaft wurde in Qt 6.7 eingeführt.

Siehe auch „ radius“ , „ topLeftRadius “, „ topRightRadius “ und „ bottomRightRadius “.

bottomRightRadius : real [since 6.7]

Diese Eigenschaft gibt den Radius an, der zum Zeichnen der unteren rechten Ecke verwendet wird.

Wenn „bottomRightRadius“ nicht festgelegt ist, wird stattdessen „ radius “ verwendet. Wenn „bottomRightRadius“ den Wert Null hat, ist die Ecke scharf.

Diese Eigenschaft wurde in Qt 6.7 eingeführt.

Siehe auch „ radius“ , „ topLeftRadius “, „ topRightRadius “ und „ bottomLeftRadius “.

color : color

Diese Eigenschaft legt die Farbe fest, mit der das Rechteck gefüllt wird.

Die Standardfarbe ist Weiß.

Das folgende Beispiel zeigt Rechtecke mit Farben, die im Hexadezimalformat und als Farbnamen angegeben sind:

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

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

Wenn sowohl ein Farbverlauf als auch eine Farbe angegeben sind, wird der Farbverlauf verwendet.

Siehe auch „ gradient “.

gradient : var

Der Farbverlauf, der zum Füllen des Rechtecks verwendet werden soll.

Diese Eigenschaft ermöglicht die Erstellung einfacher vertikaler oder horizontaler Farbverläufe. Andere Farbverläufe lassen sich durch eine Drehung des Rechtecks erzeugen.

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

Die Eigenschaft akzeptiert auch Farbverlaufsvoreinstellungen von QGradient::Preset. Beachten Sie jedoch, dass „Rectangle“ nur einfache vertikale oder horizontale Farbverläufe unterstützt; jede Voreinstellung mit einem nicht unterstützten Winkel wird daher auf die nächstliegende Darstellung zurückgesetzt.

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

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

Wenn sowohl ein Farbverlauf als auch eine Farbe angegeben werden, wird der Farbverlauf verwendet.

Siehe auch Gradient und color.

radius : real

Diese Eigenschaft enthält den Eckenradius, der zum Zeichnen eines abgerundeten Rechtecks verwendet wird.

Ist „radius“ ungleich Null, wird das Rechteck als abgerundetes Rechteck gezeichnet, andernfalls als normales Rechteck. Es können auch einzelne Eckenradien festgelegt werden (siehe unten). Diese Werte überschreiben „radius“. Sind sie nicht festgelegt (durch Setzen auf „ undefined “), wird stattdessen „radius“ verwendet.

Siehe auch „ topLeftRadius“ , „ topRightRadius “, „ bottomLeftRadius “ und „ bottomRightRadius “.

topLeftRadius : real [since 6.7]

Diese Eigenschaft enthält den Radius, der zum Zeichnen der oberen linken Ecke verwendet wird.

Wenn „topLeftRadius“ nicht festgelegt ist, wird stattdessen „ radius “ verwendet. Wenn „topLeftRadius“ den Wert Null hat, ist die Ecke spitz.

Diese Eigenschaft wurde in Qt 6.7 eingeführt.

Siehe auch „ radius“ , „ topRightRadius “, „ bottomLeftRadius “ und „ bottomRightRadius “.

topRightRadius : real [since 6.7]

Diese Eigenschaft enthält den Radius, der zum Zeichnen der oberen rechten Ecke verwendet wird.

Wenn „topRightRadius“ nicht festgelegt ist, wird stattdessen „ radius “ verwendet. Wenn „topRightRadius“ den Wert Null hat, ist die Ecke spitz.

Diese Eigenschaft wurde in Qt 6.7 eingeführt.

Siehe auch „ radius“ , „ topLeftRadius “, „ bottomLeftRadius “ und „ bottomRightRadius “.