TSplitter/de

│ Deutsch (de) │ English (en) │ suomi (fi) │ français (fr) │ 日本語 (ja) │ русский (ru) │

Ein vertikaler oder horizontaler Balken auf einem Panel oder Formular, um die Größenzuweisung (Breite oder Höhe) der beiden Hälften zur Laufzeit ändern zu können.

TSplitter

Die LCL Komponente TSplitter kann als visuelle Trennlinie zwischen zwei Hälften des Formulars verwendet werden und ermöglicht dem Benutzer diese entweder vertikal oder horizontal zu bewegen, um dadurch die Größe (Höhe oder Breite) jeder Hälfte zur Laufzeit zu verändern. Der Mauszeiger wird sein Aussehen über dem Splitter ändern, um anzuzeigen, dass eine Verschiebung möglich ist (Standard-Zeiger: crHSplit oder crVSplit). TSplitter ist in der Unit ExtCtrls definiert und befindet sich auf der IDE Komponentenpalette Additional.

TSplitter kann grundsätzlich in zwei verschiedenen Modi arbeiten: über Align (ausrichten - analog Delphi) oder über AnchorSides (nicht von Delphi unterstützt).

Splitter und Align

Align kann für viele Layouts von einfachen Strukturen mit zwei Elementen bis hin zu mehreren verschachtelt-geteilten Bereichen verwendet werden. Dazu wird ein Bedienelement auf ein festes align eingestellt (alLeft, alRight, alTop, alBottom) während das andere eine veränderliche Größe mit alClient nutzen muss. Dazwischen wird der Splitter platziert und seine align-Eigenschaft auf den gleichen, festen Wert eingestellt wie das erste Bedienelement, dessen Größe veränderlich sein soll.

Nutzt man als Bedienelemente einen Container wie zum Beispiel TPanel, lassen sich diese Bereiche auf die gleiche Art weiter unterteilen. Es entsteht am Ende ein hierarchisches, größenveränderliches Layout, das der Benutzer zur Laufzeit selbst anpassen kann.

Das folgende Beispiel zeigt dies.

Mit Formdesigner

1. erstellen Sie eine neue Form
2. fügen Sie dieser ein TMemo hinzu (zum auswählen Links-Klick auf das TMemo Symbol (Komponentenplatte Standard), dann Links-Klick auf die Form)
3. ändern Sie im Objekt-Inspektor die Eigenschaft Align von Memo1 zu alLeft
4. fügen Sie ein TSplitter der Form hinzu
5. das Standard-Align ist bereits alLeft
6. fügen Sie erneut ein TMemo der Form hinzu
7. ändern Sie im Objekt Inspektor das Align von Memo2 zu alClient

Das Gleiche als Code

procedure TMainForm.FormCreate(Sender: TObject);
var
  Memo1, Memo2: TMemo;
  Splitter1:    TSplitter;
begin
  Memo1 := TMemo.Create(Self);
  with Memo1 do begin
    Name   := 'Memo1';
    Parent := Self;
    Align  := alLeft;
  end;
  Splitter1 := TSplitter.Create(Self);
  with Splitter1 do begin
    Name   := 'Splitter1';
    Parent := Self;
    Left   := Memo1.Width + 1; // position it on the right of Memo1
    Align  := alLeft;
  end;
  Memo2 := TMemo.Create(Self);
  with Memo2 do begin
    Name   := 'Memo2';
    Parent := Self;
    Align  := alClient;
  end;
end;

Platzverteilung im umgebenden Element

Die Verteilung der zur Verfügung stehenden Fläche aus dem umgebenden Element (z.B. die Form selbst oder ein TPanel) erfolgt bei der Verwndung der Align-Methode immer asymmetrisch: Nur der Bereich mit alClient erhält mehr Platz in beiden Richtungen. Der feste Bereich behält seine Größe in vertikaler oder horizontaler Richtung bei. Als Beispiel: Wird die Größe des Formulars verändert bleibt ein Element mit alLeft darin immer gleich breit, auch wenn ein Splitter ebenfalls mit alLeft daran anliegt.

Eine symmetrische Größenänderung bei der der Splitter im Verhältnis zum umgebenden Element immer an der gleichen Stelle bleibt, muss mit Code-Unterstützung realisiert werden oder mit Hilfe der Seiten-Verankerung (AnchorSides).

Splitter mit AnchorSides

AnchorSides (Seitenverankerung) ermöglicht ein feiner abgestimmtes Layout. AnchorSides erlauben, die Seiten bzw. Ränder von Bedienelementen an nebenan liegende Bedienelemente zu koppeln, so dass diese bei Größenveränderung automatisch mitverändert werden. Im Objekt-Inspektor lässt sich das Verhalten mit der Eigenschaft Anchors einstellen oder über das mit dem Button ... erreichbare Bearbeitungs-Menü (ebenfalls erreichbar über Rechtsklick auf das Element im Designer unter dem Menüpunkt "Anker Editor"). Zu beachten ist, dass der Splitter auf Align alNone eingestellt ist, damit die Seiten-Verankerung wirkt.

Mit Formdesigner

1. erstellen Sie eine neue Form
2. fügen Sie dieser ein TMemo hinzu (zum auswählen Links-Klick auf das TMemo Symbol (Komponentenplatte Standard), dann Links-Klick auf die Form)
3. ändern Sie im Objekt-Inspektor die Eigenschaft Align von Memo1 zu alLeft
4. fügen Sie ein TSplitter der Form hinzu
5. ändern Sie die Eigenschaft Align von Splitter1 auf alNone. (Beachte: Splitter1.Top muss 0 sein, das ist hier der Fall, weil der Standard Align=alLeft eingestellt war. Splitter1.Anchors muss auf [akTop, akBottom] eingestellt sein. Ist dies nicht der Fall, gibt es Darstellungsfehler beim rendern des Splitters, wenn die Form in der Größe verändert wird)
6. Klicken Sie auf Ihrer Form das Memo1 mit einem Rechtsklick an und wählen Sie "Ankereditor" im Popupmenü aus (Alternativ: Im Objektinspektor bei Memo1.Anchors den Button ... benutzen)
7. verankern Sie die rechte Seite von Memo1 mit Splitter1 (Beachte: Buttons unterhalb der Combobox sind auf "rechte Seite mit linker Seite verankern" eingestellt; Siehe Tooltip des ersten Buttons von links)
8. fügen Sie erneut ein TMemo der Form hinzu
9. ändern Sie im Objekt-Inspektor das Align von Memo2 zu alRight (Hinweis: Im Anker-Editor ist dies gleichbedeutend mit "verankern mit: (nil)" in der Combobox, was hier dem Formular-Rand entspricht)
10. verankern Sie die linke Seite von Memo2 mit Splitter1 und benutzen die Buttons unterhalb der Combobox, um einzustellen, dass die linke Seite von Splitter1 mit der rechten Seite von Memo2 verbunden wird (3. Button von links, Tooltip "linke Seite mit rechter Seite verankern")

Die Seiten sind damit in der Art verknüpft:

| linker Rand | alLeft linke Seite [Memo1] rechte Seite | linke Seite [Splitter1] rechte Seite | linkeSeite [Memo2] rechteSeite alRight | rechter Rand |

Das Gleiche als Code

procedure TMainForm.FormCreate(Sender: TObject);
var
  Memo1, Memo2: TMemo;
  Splitter1:    TSplitter;
begin
  Memo1 := TMemo.Create(Self);
  with Memo1 do begin
    Name   := 'Memo1';
    Parent := Self;
    Align  := alLeft;
  end;
  Splitter1 := TSplitter.Create(Self);
  with Splitter1 do begin
    Name   := 'Splitter1';
    Parent := Self;
    Align  := alNone;
    Left   := 100; // some value
    AnchorParallel(akBottom, 0, Parent);
  end;
  Memo1.AnchorToNeighbour(akRight, 0, Splitter1);
  Memo2 := TMemo.Create(Self);
  with Memo2 do begin
    Name   := 'Memo2';
    Parent := Self;
    Align  := alRight;
    AnchorToNeighbour(akLeft, 0, Splitter1);
  end;
end;

Platzverteilung im umgebenden Element

Im Gegensatz zum Layout über die Align-Eigenschaft, wird der Platz bei Größenveränderung des umgebenden Elements gleichmäßig, symmetrisch an die beiden an den Splitter gekoppelten Bedienelemente verteilt.

Unterscheide zum TPairSplitter

Lazarus (zur Zeit Version 3.6) bietet auch einen TPairSplitter an (ebenfalls in der 'Additionals' Sektion), der ähnlich einem TPanel platziert werden kann und die Trennlinie zur Größenverschiebung in der Mitte anzeigt. Die beiden Seiten können jeweils mit anderen Komponenten befüllt werden und beispielsweise mit Align=alClient in die verfügbare Fläche eingepasst werden. Über die Eigenschaft TPairSplitter.Position (Angabe in Pixeln) kann die Größenzuordnung ausgelesen und verändert werden. Zur Design-Zeit lässt sich der Trenner in der Mitte nicht mit der Maus verschieben (nur über die Position-Eigenschaft).

Die Größenänderung verhält sich zur Laufzeit genau wie beim TSplitter. Wenn der umgebende Container in der Größe verändert wird, wird der Platz asymmetrisch verteilt und nur die Hälfte, die auf clClient' eingestellt ist, erhält mehr Platz in beiden Richtungen. Das ist insbesondere einleuchtend, da die Positions-Eigenschaft einen absoluten Wert in Pixeln hat, der nicht automatisch neu berechnet wird.

---

Gehe zurück zu: LCL Components

— Komponente zuvor: TXMLPropStorage/de

Nächste Komponente: TBarChart/de