Ein gutes Layout verbessert immer die Benutzerfreundlichkeit einer Anwendung, und dies gilt für alle Arten von Anwendungen, vom Desktop bis zum Handy. Ein solches Schnittstellenelement, das die Benutzerfreundlichkeit verbessern kann, ist die Klasse QSplitter , die ein Layout Objekt mit einem schwebenden Splitter ist, der die beiden Bereiche in der Anwendungsschnittstelle trennt.
Projektstruktur für QSplitter
Projektstruktur für QSplitter Die Projektstruktur ist absolut unauffällig und wenig interessant, da die Hauptaktionen im Designer ausgeführt werden und die QSplitter Einstellung in mainwindow.cpp minimal ist.
Schritt für Schritt mit QSplitter arbeiten
Erster Schritt - Zuerst fügen wir zwei Objekte vom Typ Layout hinzu, in denen sich die Oberflächenelemente befinden werden
Hinzufügen von zwei Layouts Zweiter Schritt - Wählen Sie beide Layouts aus, indem Sie Strg gedrückt halten und klicken Sie auf die Schaltfläche "Horizontal mit Trennzeichen anordnen", oder "Vertikal mit Trennzeichen anordnen", je nachdem, wer es braucht es ...
Layout mit QSplitter Dritter Schritt - Dehnen Sie den Bereich, in dem sich unser QSplitter befindet Dies ist notwendig, wenn sich das Aussehen Ihres QSplitter nicht wie gewünscht verhält. Wählen Sie dazu das übergeordnete Widget aus, das Ihren QSplitter enthält und klicken Sie auf die Schaltfläche "Layout to grid". Als Ergebnis erhalten wir ein Ergebnis ähnlich der Abbildung unten.
Dehnen Sie den Bereich mit QSplitter Vierter Schritt - fügen Sie zur Verdeutlichung einige Objekte hinzu.
Objekte in Ebenen Fünfter Schritt - Korrigieren Sie den Programmcode, um die Dehnung der Bereiche beim Start der Anwendung anzupassen und die Farbe des Trennzeichens einzustellen.
#include "mainwindow.h" #include "ui_mainwindow.h" MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); /* Устанавливаем параметры растяжения областей. * Области считаются слева направо. * в Методе setStretchFactor вначале устанавливается индекс * области, а потом её вес. * Таким образом первой области ставим максимальный вес, * а второй области минимальный. * */ ui->splitter->setStretchFactor(0,1); ui->splitter->setStretchFactor(1,0); /* Также сразу хочу показать, как выбрать цвет разделителя. * Для это нам необходимо воспользоваться классом QPallete, * Для которого выбираем цвет фона. * */ QPalette p; p.setColor(QPalette::Background, Qt::red); /* И устанавливаем палитру на QSplitter * */ ui->splitter->setPalette(p); } MainWindow::~MainWindow() { delete ui; }
Ergebnis
Als Ergebnis sieht die Anwendung so aus.
Trenner-App