Ein schneller Einstieg in den „ Qt Widgets “-Designer

Die Verwendung von „ Qt Widgets “ Designer umfasst vier grundlegende Schritte:

1. Wählen Sie Ihr Formular und Ihre Objekte aus
2. Ordnen Sie die Objekte auf dem Formular an
3. Verbinden Sie die Signale mit den Steckplätzen
4. Vorschau des Formulars anzeigen

Angenommen, Sie möchten ein kleines Widget (siehe Screenshot oben) entwerfen, das die Steuerelemente zur Bearbeitung von Rot-, Grün- und Blau-Werten (RGB) enthält – eine Art von Widget, wie man es überall in Bildbearbeitungsprogrammen findet.

Auswahl eines Formulars Sie beginnen damit, im Dialogfeld „Neues Formular “ die Option „Widget“ auszuwählen.

Widgets auf einem Formular platzieren Ziehen Sie drei Beschriftungen, drei Drehfelder und drei vertikale Schieberegler auf Ihr Formular. Um den Standardtext einer Beschriftung zu ändern, doppelklicken Sie einfach darauf. Sie können die Elemente nach Ihren Vorstellungen anordnen.

Um sicherzustellen, dass sie in Ihrem Programm genau so angeordnet werden, müssen Sie diese Widgets in einem Layout platzieren. Wir werden dies in Dreiergruppen tun. Wählen Sie das Label „RED“ aus. Halten Sie dann die Strg-Taste gedrückt, während Sie das zugehörige Drehfeld und den Schieberegler auswählen. Wählen Sie im Menü „Formular“ die Option „In einem Raster anordnen“ aus.

Wiederholen Sie diesen Schritt für die beiden anderen Beschriftungen sowie deren zugehörige Drehfelder und Schieberegler.

Im nächsten Schritt fügen Sie alle drei Layouts zu einem Hauptlayout zusammen. Das Hauptlayout ist das Layout des Widgets der obersten Ebene (in diesem Fall das „ QWidget “). Es ist wichtig, dass Ihr Widget der obersten Ebene über ein Layout verfügt; andernfalls wird die Größe der Widgets in Ihrem Fenster nicht angepasst, wenn Sie die Größe des Fensters ändern. Um das Layout festzulegen, klicken Sie mit der rechten Maustaste an eine beliebige Stelle auf Ihrem Formular außerhalb der drei separaten Layouts und wählen Sie „Horizontal anordnen“. Alternativ können Sie auch „In einem Raster anordnen “ wählen – Sie sehen dann dieselbe Anordnung (siehe unten).

Wenn Sie auf den Schieberegler klicken und ihn auf einen bestimmten Wert ziehen, soll das Drehfeld die Position des Schiebereglers anzeigen. Um dieses Verhalten zu erreichen, müssen Sie das Signal „ valueChanged()“ des Schiebereglers mit dem Slot „ setValue()“ des Drehfelds verbinden. Außerdem müssen Sie die umgekehrten Verbindungen herstellen, z. B. das Signal „ valueChanged()“ des Drehfelds mit dem Slot „ setValue()“ des Schiebereglers verbinden.

Dazu müssen Sie in den Modus „Signale/Slots bearbeiten “ wechseln, entweder durch Drücken der Taste F4 oder durch Auswahl von „Signale/Slots bearbeiten “ im Menü „Bearbeiten “.

Signale mit Slots verbinden Klicken Sie auf den Schieberegler und ziehen Sie den Cursor in Richtung des Eingabefelds. Das unten abgebildete Dialogfeld „Verbindung konfigurieren “ wird angezeigt. Wählen Sie das richtige Signal und den richtigen Anschluss aus und klicken Sie auf „OK“.

Wiederholen Sie den Schritt (in umgekehrter Reihenfolge), indem Sie auf das Eingabefeld klicken und den Cursor in Richtung des Schiebereglers ziehen, um das Signal „ valueChanged “ des Eingabefelds mit dem Slot „ setValue “ des Schiebereglers zu verbinden.

Sie können den folgenden Screenshot als Orientierungshilfe für die Auswahl des richtigen Signals und Slots verwenden.

Nachdem Sie nun die Objekte für die Komponente „RED“ des RGB-Controllers erfolgreich verbunden haben, gehen Sie ebenso für die Komponenten „GREEN“ und „BLUE“ vor.

Da RGB-Werte zwischen 0 und 255 liegen, müssen wir das Eingabefeld und den Schieberegler auf diesen bestimmten Bereich beschränken.

Widget-Eigenschaften festlegen Klicken Sie auf das erste Drehfeld. Im Eigenschafteneditor werden die Eigenschaften von „ QSpinBox “ angezeigt. Geben Sie „255“ für die Eigenschaft „ maximum “ ein. Klicken Sie anschließend auf den ersten vertikalen Schieberegler; die Eigenschaften von „ QAbstractSlider “ werden angezeigt. Geben Sie auch hier „255“ für die Eigenschaft „ maximum “ ein. Wiederholen Sie diesen Vorgang für die übrigen Drehfelder und Schieberegler.

Sehen Sie sich nun eine Vorschau Ihres Formulars an, um zu sehen, wie es in Ihrer Anwendung aussehen würde – drücken Sie Strg + R oder wählen Sie „Vorschau“ aus dem Menü „Formular “. Versuchen Sie, den Schieberegler zu verschieben – das Drehfeld spiegelt dessen Wert ebenfalls wider (und umgekehrt). Außerdem können Sie die Größe ändern, um zu sehen, wie die Layouts, die zur Verwaltung der untergeordneten Widgets verwendet werden, auf unterschiedliche Fenstergrößen reagieren.