Vertikaler Stapel Container Skript Komponente

Ein vertikaler Stapel ist ein übergeordneter Container, der die untergeordneten Komponenten vertikal anordnet. Um Komponenten horizontal anzuordnen, verwenden Sie einen horizontalen Stapelbehälter.

Hinweis: Jede Skriptseite hat einen standardmäßigen vertikalen Stapelcontainer, der alles enthält, was der Seite hinzugefügt wurde. Sie können diese Stammkomponente nicht löschen, aber Sie können ihre Eigenschaften ändern und ihr Komponenten hinzufügen.

  1. Da der Standardcontainer ein Vertical Stack-Container ist, müssen Sie möglicherweise keinen zusätzlichen Container hinzufügen. Um einen weiteren hinzuzufügen, klicken Sie auf das Symbol Vertikaler Stapelcontainer in der Komponentensymbolleiste Die Abbildung zeigt den Fahrtrichtungsanzeiger in einem leeren vertikalen Stapelbehälter

    Wenn Sie einen vertikalen Stapelcontainer auswählen, zeigt der Skripteditor einen nach unten gerichteten Indikator an. Der Pfeil zeigt an, wie neue Komponenten, die dem Steuerelement hinzugefügt werden, zueinander ausgerichtet sind.

    Bei einem vertikalen Stapel positioniert der Skript-Editor neue Komponenten unterhalb der vorherigen Komponente. Wenn Sie eine Textkomponente hinzufügen, gefolgt von einer Eingabe, stapelt der Editor die Steuerelemente vertikal.

  2. Wenn Sie eine weitere Komponente über die Symbolleiste hinzufügen, platziert der Container sie unter dem aktuell ausgewählten Element.

  3. Optional können Sie die Eigenschaften dieser Komponente festlegen.

    Allgemein

    Konfiguriert die Breite auf eine feste Größe, die je nach Bedarf wächst, um den Inhalt anzuzeigen oder so viel Platz wie möglich im Verhältnis zu anderen Komponenten zu beanspruchen, wobei eine Gewichtung die Größenanpassung beeinflusst.

    Einstellung Beschreibung
    Skript-Layout Automatische Größenanpassung Die automatische Größenanpassung konfiguriert die Komponente so, dass sie entsprechend ihrem Inhalt verkleinert oder vergrößert wird. So kann beispielsweise die Breite eines Etiketts je nach der darin enthaltenen Textmenge zunehmen.
    einstellungen-grösse-stretch

    Die Streckung ermöglicht es einer Komponente, im Verhältnis zu anderen Komponenten so viel Platz wie möglich zu beanspruchen, wobei die Größenanpassung durch Gewichtung beeinflusst wird.

    Wenn zwei Komponenten beide auf Streckung eingestellt sind, werden ihnen standardmäßig jeweils 50 % des verbleibenden Platzes zugewiesen. Dieser Anteil kann durch Änderung des Gewichtswertes angepasst werden.

    Wenn Sie z. B. für eine Komponente eine Gewichtung von 200 und für die andere eine Gewichtung von 100 festlegen, nimmt die erste Komponente zwei Drittel des verbleibenden Platzes ein, während die andere Komponente nur ein Drittel einnimmt. Das erste Bauteil erscheint doppelt so groß wie das andere, da sein Gewicht doppelt so groß ist wie das des zweiten Bauteils.

    Skript Layout-Pixel Legt eine feste Größe in Pixeln fest. Sie können einen ganzzahligen Wert in das Feld eingeben oder die Pfeile nach oben oder unten verwenden, um die Größe zu erhöhen oder zu verringern. Diese Pfeile sind sichtbar, wenn die Komponente den Fokus hat.

    Konfiguriert die Höhe auf eine feste Größe, damit sie je nach Bedarf wächst, um den Inhalt anzuzeigen, oder um so viel Platz wie möglich im Verhältnis zu anderen Komponenten zu beanspruchen, wobei eine Gewichtung die Größenanpassung beeinflusst.

    Einstellung Beschreibung
    Skript Layout Automatische Größenanpassung Höhe Die automatische Größenanpassung konfiguriert die Komponente so, dass sie entsprechend ihrem Inhalt verkleinert oder vergrößert wird.
    Skript Layout Pixel Höhe Legt eine feste Größe in Pixeln fest. Sie können einen ganzzahligen Wert in das Feld eingeben oder die Pfeile nach oben oder unten verwenden, um die Größe zu erhöhen oder zu verringern. Diese Pfeile sind sichtbar, wenn die Komponente den Fokus hat.
    einstellungen-grösse-stretch

    Die Streckung ermöglicht es einer Komponente, im Verhältnis zu anderen Komponenten so viel Platz wie möglich zu beanspruchen, wobei die Größenanpassung durch Gewichtung beeinflusst wird.

    Wenn zwei Komponenten beide auf Streckung eingestellt sind, werden ihnen standardmäßig jeweils 50 % des verbleibenden Platzes zugewiesen. Dieser Anteil kann durch Änderung des Gewichtswertes angepasst werden.

    Wenn Sie z. B. für eine Komponente eine Gewichtung von 200 und für die andere eine Gewichtung von 100 festlegen, nimmt die erste Komponente zwei Drittel des verbleibenden Platzes ein, während die andere Komponente nur ein Drittel einnimmt. Das erste Bauteil erscheint doppelt so groß wie das andere, da sein Gewicht doppelt so groß ist wie das des zweiten Bauteils.

    Padding definiert den Abstand zwischen dem inneren Rand und dem Inhalt. Ein Rand legt den Abstand außerhalb eines Rahmens fest, während eine Auffüllung den Abstand innerhalb eines Rahmens vergrößert.

    padding_vs_margin

    1. Um optional alle Auffüllungswerte auf einmal zu aktualisieren, klicken Sie auf die Schaltfläche Alle einstellen für Auffüllung im Eigenschaftenbereich

      bild der Schaltfläche "Alles einstellen

    2. Klicken Sie auf das Wertfeld für einen Randartikel. In diesem Feld erscheint ein Drehschalter.

    3. Verwenden Sie den Drehknopf, um die Randbreite zu erhöhen oder zu verringern. Wurde Alle einstellen ausgewählt, wird die Änderung auf alle Werte angewendet.

      Die Abbildung zeigt, wie der Wert einer Rahmeneinstellung geändert werden kann

      Die Komponente wird sofort unter Verwendung ihrer neuen Auffüllungseinstellung neu positioniert.

    Setzt die Hintergrundfarbe auf eine der folgenden Optionen:

    einstellungen-bg-farbe-popup2
    • Standard- Weist die Standardfarbe zu.

    • Farbe- Ermöglicht die Auswahl aus einer Palette gängiger Farben oder die Auswahl eigener Farben durch Eingabe von RGB-Werten oder durch Verschieben des Farbwählers auf eine neue Spektrumsposition. Das Festlegen der Farbe für Text und Hintergrund ist eine Eigenschaft im Aussehen Panel. Dieses Eigenschaftenfenster ist nur für Komponenten verfügbar, die über die Farbfunktionalität verfügen.
      Klicken Sie auf . Wählen Sie , um die aktuelle Auswahl zuzuordnen

      einstellungen-text-farbe-popup-farben

    • Variable- weist eine in einer String-Variablen gespeicherte Farbe zu. Zum Beispiel, um dunkelblau zuzuweisen:

      1. Klicken Sie auf die Registerkarte Variablen

      2. Klicken Sie auf + , um eine Variable hinzuzufügen

        Die Abbildung zeigt die Schaltfläche zum Hinzufügen einer neuen Variable.

      3. Wählen Sie String als Typ des Wertes, den die neue Variable speichert

      4. Geben Sie einen beschreibenden Namen in das Feld Name ein.

      5. Stellen Sie Standardwerte auf 0000FF oder #0000FF ein, was der Hexadezimalcode für Dunkelblau ist

        auswahl-farbe-in-variable

      6. Klicken Sie auf Übernehmen Sie.
      7. Weisen Sie die Variable dieser Farbeigenschaft zu.

        mycolor-Variable

    So ändern Sie die Hintergrundfarbe einer Skriptseite

    Um die Hintergrundfarbe einer ganzen Seite festzulegen, weisen Sie dem vertikalen Stammcontainer eine Hintergrundfarbe zu.

    1. Klicken Sie in der Breadcrumbs-Leiste auf das Symbol für den Stammcontainer.

      select-root-container

    2. Weisen Sie unter Common oder Appearanceeine andere Hintergrundfarbe zu

      Sie können interessante Effekte erzielen, indem Sie anderen Containern unterschiedliche Hintergrundfarben zuweisen.

      zusätzliche farbige Container

    Border definiert den Abstand zwischen padding und margin. Ein Rand legt den Abstand außerhalb eines Rahmens fest, während eine Auffüllung den Raum zwischen dem Rahmen und der Komponente vergrößert.

    Die Abbildung zeigt die Beziehung zwischen den Einstellungen für Rand, Umrandung und Auffüllung.

    1. Um optional alle Randwerte auf einmal zu aktualisieren, klicken Sie auf die Schaltfläche "Alle einstellen" für "Rand" im Eigenschaftenfenster.

      bild der Schaltfläche "Alles einstellen

    2. Klicken Sie auf das Wertfeld für einen Randartikel. In diesem Feld erscheint ein Drehschalter.

    3. Verwenden Sie den Drehknopf, um die Randbreite zu erhöhen oder zu verringern. Wurde Alle einstellen ausgewählt, wird die Änderung auf alle Polsterwerte angewendet.

      Die Abbildung zeigt, wie der Wert einer Rahmeneinstellung geändert werden kann

      Die Komponente wird sofort unter Verwendung ihrer neuen Randeinstellung neu positioniert.

    Layout

    Konfiguriert die Breite auf eine feste Größe, die je nach Bedarf wächst, um den Inhalt anzuzeigen oder so viel Platz wie möglich im Verhältnis zu anderen Komponenten zu beanspruchen, wobei eine Gewichtung die Größenanpassung beeinflusst.

    Einstellung Beschreibung
    Skript-Layout Automatische Größenanpassung Die automatische Größenanpassung konfiguriert die Komponente so, dass sie entsprechend ihrem Inhalt verkleinert oder vergrößert wird. So kann beispielsweise die Breite eines Etiketts je nach der darin enthaltenen Textmenge zunehmen.
    einstellungen-grösse-stretch

    Die Streckung ermöglicht es einer Komponente, im Verhältnis zu anderen Komponenten so viel Platz wie möglich zu beanspruchen, wobei die Größenanpassung durch Gewichtung beeinflusst wird.

    Wenn zwei Komponenten beide auf Streckung eingestellt sind, werden ihnen standardmäßig jeweils 50 % des verbleibenden Platzes zugewiesen. Dieser Anteil kann durch Änderung des Gewichtswertes angepasst werden.

    Wenn Sie z. B. für eine Komponente eine Gewichtung von 200 und für die andere eine Gewichtung von 100 festlegen, nimmt die erste Komponente zwei Drittel des verbleibenden Platzes ein, während die andere Komponente nur ein Drittel einnimmt. Das erste Bauteil erscheint doppelt so groß wie das andere, da sein Gewicht doppelt so groß ist wie das des zweiten Bauteils.

    Skript Layout-Pixel Legt eine feste Größe in Pixeln fest. Sie können einen ganzzahligen Wert in das Feld eingeben oder die Pfeile nach oben oder unten verwenden, um die Größe zu erhöhen oder zu verringern. Diese Pfeile sind sichtbar, wenn die Komponente den Fokus hat.

    Konfiguriert die Höhe auf eine feste Größe, damit sie je nach Bedarf wächst, um den Inhalt anzuzeigen, oder um so viel Platz wie möglich im Verhältnis zu anderen Komponenten zu beanspruchen, wobei eine Gewichtung die Größenanpassung beeinflusst.

    Einstellung Beschreibung
    Skript Layout Automatische Größenanpassung Höhe Die automatische Größenanpassung konfiguriert die Komponente so, dass sie entsprechend ihrem Inhalt verkleinert oder vergrößert wird.
    Skript Layout Pixel Höhe Legt eine feste Größe in Pixeln fest. Sie können einen ganzzahligen Wert in das Feld eingeben oder die Pfeile nach oben oder unten verwenden, um die Größe zu erhöhen oder zu verringern. Diese Pfeile sind sichtbar, wenn die Komponente den Fokus hat.
    einstellungen-grösse-stretch

    Die Streckung ermöglicht es einer Komponente, im Verhältnis zu anderen Komponenten so viel Platz wie möglich zu beanspruchen, wobei die Größenanpassung durch Gewichtung beeinflusst wird.

    Wenn zwei Komponenten beide auf Streckung eingestellt sind, werden ihnen standardmäßig jeweils 50 % des verbleibenden Platzes zugewiesen. Dieser Anteil kann durch Änderung des Gewichtswertes angepasst werden.

    Wenn Sie z. B. für eine Komponente eine Gewichtung von 200 und für die andere eine Gewichtung von 100 festlegen, nimmt die erste Komponente zwei Drittel des verbleibenden Platzes ein, während die andere Komponente nur ein Drittel einnimmt. Das erste Bauteil erscheint doppelt so groß wie das andere, da sein Gewicht doppelt so groß ist wie das des zweiten Bauteils.

    Richtet eine Komponente relativ zu ihrem übergeordneten Container links, rechts oder mittig aus.

    Tipp: Eine Komponente kann nicht vertikal zentriert ausgerichtet werden, wenn die Höheneinstellung des übergeordneten Containers Auto Sizinglautet. Um dies zu korrigieren, setzen Sie die Höhe des übergeordneten Containers auf Stretch oder auf eine feste Höhe in Pixels
    Einstellung Beispiel
    ausrichten-links2 links-ausrichten-Beispiel2
    ausrichten-Zentrieren2 ausrichten-zentrieren-Beispiel2
    rechtsbündig2 rechts-ausrichten-Beispiel2
    ausrichten-starten align-start-example
    vertikal-zentriert ausrichten align-vertical-center-example
    ausrichten-vertikal-ende align-vertical-end-example

    Die Kinderanordnung bestimmt, wie der Inhalt eines Containers angeordnet wird, wenn der Container zusätzlichen Platz hat.

    Diese Einstellung ist deaktiviert, wenn die Breite und Höhe eines Containers automatisch angepasst wird. Die automatische Größenanpassung weist den Container an, sich auf die Größe der darin enthaltenen Elemente auszudehnen. Da dadurch kein zusätzlicher Platz zur Verfügung steht, haben die Eigenschaften der untergeordneten Anordnungen keine Bedeutung und sind deaktiviert. Um die untergeordnete Anordnung zu aktivieren, legen Sie die Breite des Containers in Pixeln fest oder strecken Sie ihn.

    Wenn ein Container zusätzlichen Platz hat, können Sie eine der folgenden Möglichkeiten wählen, um die Platzverteilung zu beeinflussen:

    • Start- Der Inhalt wird an den Anfang des Containers verteilt.

      kind_Anordnung_Start

    • Center- Der Inhalt wird in die Mitte des Containers verteilt.

      kind_arrangement_center

    • Ende- Der Inhalt wird bis zum Ende des Containers verteilt.

      kind_anordnung_ende

    Ränder legen den linken, rechten, oberen und unteren Abstand um einen Rahmen fest.

    Die Abbildung zeigt die Beziehung zwischen den Einstellungen für Rand, Umrandung und Auffüllung.

    1. Um optional alle Randwerte auf einmal zu aktualisieren, klicken Sie auf die Schaltfläche Alle einstellen für Rand im Eigenschaftenfenster

      bild der Schaltfläche "Alles einstellen

    2. Klicken Sie auf das Wertfeld für eine Spanne. In diesem Feld erscheint ein Drehschalter.

    3. Verwenden Sie den Drehknopf, um den Spielraum zu vergrößern oder zu verkleinern. Wenn Alle ausgewählt wurde, wird die Änderung auf alle Ränder angewendet

      einstellungen-margin-spinner

      Die Komponente wird sofort unter Verwendung ihrer neuen Randeinstellung neu positioniert.

    Legt die Sichtbarkeit einer Komponente auf der Grundlage des Wertes einer booleschen Variable (Wahr oder Falsch) fest.

    1. Klicken Sie auf die Eigenschaftsgruppe Layout Klicken Sie unter Sichtbar auf Variable auswählen.
    2. Wählen Sie eine Variable aus, oder erstellen Sie optional eine neue Ja/Nein-Variable und weisen Sie diese neue Variable der Eigenschaft Sichtbar zu
    3. Zur Laufzeit ist die Komponente sichtbar, wenn der Wert der Variablen True ist. Umgekehrt wird sie ausgeblendet, wenn der Wert der Variablen Falselautet.

    Padding definiert den Abstand zwischen dem inneren Rand und dem Inhalt. Ein Rand legt den Abstand außerhalb eines Rahmens fest, während eine Auffüllung den Abstand innerhalb eines Rahmens vergrößert.

    padding_vs_margin

    1. Um optional alle Auffüllungswerte auf einmal zu aktualisieren, klicken Sie auf die Schaltfläche Alle einstellen für Auffüllung im Eigenschaftenbereich

      bild der Schaltfläche "Alles einstellen

    2. Klicken Sie auf das Wertfeld für einen Randartikel. In diesem Feld erscheint ein Drehschalter.

    3. Verwenden Sie den Drehknopf, um die Randbreite zu erhöhen oder zu verringern. Wurde Alle einstellen ausgewählt, wird die Änderung auf alle Werte angewendet.

      Die Abbildung zeigt, wie der Wert einer Rahmeneinstellung geändert werden kann

      Die Komponente wird sofort unter Verwendung ihrer neuen Auffüllungseinstellung neu positioniert.

    Erscheinungsbild

    Setzt die Hintergrundfarbe auf eine der folgenden Optionen:

    einstellungen-bg-farbe-popup2
    • Standard- Weist die Standardfarbe zu.

    • Farbe- Ermöglicht die Auswahl aus einer Palette gängiger Farben oder die Auswahl eigener Farben durch Eingabe von RGB-Werten oder durch Verschieben des Farbwählers auf eine neue Spektrumsposition. Das Festlegen der Farbe für Text und Hintergrund ist eine Eigenschaft im Aussehen Panel. Dieses Eigenschaftenfenster ist nur für Komponenten verfügbar, die über die Farbfunktionalität verfügen.
      Klicken Sie auf . Wählen Sie , um die aktuelle Auswahl zuzuordnen

      einstellungen-text-farbe-popup-farben

    • Variable- weist eine in einer String-Variablen gespeicherte Farbe zu. Zum Beispiel, um dunkelblau zuzuweisen:

      1. Klicken Sie auf die Registerkarte Variablen

      2. Klicken Sie auf + , um eine Variable hinzuzufügen

        Die Abbildung zeigt die Schaltfläche zum Hinzufügen einer neuen Variable.

      3. Wählen Sie String als Typ des Wertes, den die neue Variable speichert

      4. Geben Sie einen beschreibenden Namen in das Feld Name ein.

      5. Stellen Sie Standardwerte auf 0000FF oder #0000FF ein, was der Hexadezimalcode für Dunkelblau ist

        auswahl-farbe-in-variable

      6. Klicken Sie auf Übernehmen Sie.
      7. Weisen Sie die Variable dieser Farbeigenschaft zu.

        mycolor-Variable

    So ändern Sie die Hintergrundfarbe einer Skriptseite

    Um die Hintergrundfarbe einer ganzen Seite festzulegen, weisen Sie dem vertikalen Stammcontainer eine Hintergrundfarbe zu.

    1. Klicken Sie in der Breadcrumbs-Leiste auf das Symbol für den Stammcontainer.

      select-root-container

    2. Weisen Sie unter Common oder Appearanceeine andere Hintergrundfarbe zu

      Sie können interessante Effekte erzielen, indem Sie anderen Containern unterschiedliche Hintergrundfarben zuweisen.

      zusätzliche farbige Container

    Border definiert den Abstand zwischen padding und margin. Ein Rand legt den Abstand außerhalb eines Rahmens fest, während eine Auffüllung den Raum zwischen dem Rahmen und der Komponente vergrößert.

    Die Abbildung zeigt die Beziehung zwischen den Einstellungen für Rand, Umrandung und Auffüllung.

    1. Um optional alle Randwerte auf einmal zu aktualisieren, klicken Sie auf die Schaltfläche "Alle einstellen" für "Rand" im Eigenschaftenfenster.

      bild der Schaltfläche "Alles einstellen

    2. Klicken Sie auf das Wertfeld für einen Randartikel. In diesem Feld erscheint ein Drehschalter.

    3. Verwenden Sie den Drehknopf, um die Randbreite zu erhöhen oder zu verringern. Wurde Alle einstellen ausgewählt, wird die Änderung auf alle Polsterwerte angewendet.

      Die Abbildung zeigt, wie der Wert einer Rahmeneinstellung geändert werden kann

      Die Komponente wird sofort unter Verwendung ihrer neuen Randeinstellung neu positioniert.