Our goal is to design a simple example of using splitters, following the interface of the Qt editor. Each window can change its size by mouse. The effect is shown in the figure above.
Using Designer to Realize
1. Open the Qt creator editor, create a new Qt Widgets Application project, select "MainWindow" and go to "Designer Mode" to design the UI interface. Add three QLabel components, one QTree Widget component and two QT extEdit components, as shown in the figure above: 1, 3, 5 are QLabel components, 2 are QTree Widget components, and 4, 6 are QTree Edit components.
2. Modify the title and size of the window and the contents of other controls in the properties.
3. Vertical layouts of 1 and 2, 3 and 4, 5 and 6 form three sub-windows of "Project", "Edit Code" and "Application Output".
4. Use vertical splitter layout for (3,4) and (5,6).
5. Use horizontal splitter layout for (1,2) and (3,4,5,6).
6. Finally, the whole window is meshed.
Complete project:
GitHub Download: https://github.com/MarsXiaolei/QtCode/tree/9dab91562a54b8480873840f15b2074e6e7ba022/Splitter
Hand Code Implementation
Key code:
void MainWindow::initSplitter() { //Setting the title of the window this->setWindowTitle("Window splitter"); //Set window size this->resize(1024, 768); this->setMinimumSize(QSize(1024, 768)); //Grid layout gridLayout = new QGridLayout(ui->centralWidget); gridLayout->setSpacing(6); gridLayout->setContentsMargins(11, 11, 11, 11); //Splitter splitter_2 = new QSplitter(ui->centralWidget); splitter_2->setOrientation(Qt::Horizontal); splitter = new QSplitter(splitter_2); splitter->setOrientation(Qt::Vertical); //window widget = new QWidget(splitter_2); widget1 = new QWidget(splitter); widget2 = new QWidget(splitter); //Vertical layout verticalLayout = new QVBoxLayout(widget); verticalLayout->setSpacing(0); verticalLayout->setContentsMargins(11, 11, 11, 11); verticalLayout->setContentsMargins(0, 0, 0, 0); verticalLayout_2 = new QVBoxLayout(widget1); verticalLayout_2->setSpacing(0); verticalLayout_2->setContentsMargins(11, 11, 11, 11); verticalLayout_2->setObjectName(QStringLiteral("verticalLayout_2")); verticalLayout_2->setContentsMargins(0, 0, 0, 0); verticalLayout_3 = new QVBoxLayout(widget2); verticalLayout_3->setSpacing(0); verticalLayout_3->setContentsMargins(11, 11, 11, 11); verticalLayout_3->setObjectName(QStringLiteral("verticalLayout_3")); verticalLayout_3->setContentsMargins(0, 0, 0, 0); //Label label = new QLabel(widget); label->setText("project"); label->setStyleSheet(QString::fromUtf8("color: rgb(255, 255, 255);background-color: rgb(186, 151, 200);font: 9pt Microsoft YaHei")); label_2 = new QLabel(widget1); label_2->setText("Edit code"); label_2->setStyleSheet(QString::fromUtf8("color: rgb(255, 255, 255);background-color: rgb(186, 151, 200);font: 9pt Microsoft YaHei")); label_3 = new QLabel(widget2); label_3->setText("Application Output"); label_3->setStyleSheet(QString::fromUtf8("color: rgb(255, 255, 255);background-color: rgb(186, 151, 200);font: 9pt Microsoft YaHei")); textEdit = new QTextEdit(widget1); textEdit_2 = new QTextEdit(widget2); treeWidget = new QTreeWidget(widget); //Project window verticalLayout->addWidget(label); verticalLayout->addWidget(treeWidget); // verticalLayout_2->addWidget(label_2); verticalLayout_2->addWidget(textEdit); verticalLayout_3->addWidget(label_3); verticalLayout_3->addWidget(textEdit_2); splitter->addWidget(widget1); splitter->addWidget(widget2); splitter_2->addWidget(widget); splitter_2->addWidget(splitter); //Add a splitter to the grid layout gridLayout->addWidget(splitter_2, 0, 0, 1, 1); //Add header QTreeWidgetItem *qtreewidgetitem = treeWidget->headerItem(); qtreewidgetitem->setText(0,"Project"); const bool sortingEnabled = treeWidget->isSortingEnabled(); treeWidget->setSortingEnabled(false); //Header file QTreeWidgetItem *qtreewidgetitem1=new QTreeWidgetItem(treeWidget); qtreewidgetitem1 = treeWidget->topLevelItem(0); qtreewidgetitem1->setText(0, "Header file"); QTreeWidgetItem *qtreewidgetitem2=new QTreeWidgetItem(qtreewidgetitem1); qtreewidgetitem2->setText(0, "1.h"); qtreewidgetitem1->addChild(qtreewidgetitem2); QTreeWidgetItem *qtreewidgetitem3 = new QTreeWidgetItem(qtreewidgetitem1); qtreewidgetitem3->setText(0,"2.h"); qtreewidgetitem1->addChild(qtreewidgetitem3); //source file QTreeWidgetItem *qtreewidgetitem4=new QTreeWidgetItem(treeWidget); qtreewidgetitem4 = treeWidget->topLevelItem(1); qtreewidgetitem4->setText(0, "source file"); QTreeWidgetItem *qtreewidgetitem5 = new QTreeWidgetItem(qtreewidgetitem4); qtreewidgetitem5->setText(0, "main.cpp"); qtreewidgetitem4->addChild(qtreewidgetitem5); QTreeWidgetItem *qtreewidgetitem6 = new QTreeWidgetItem(qtreewidgetitem4); qtreewidgetitem6->setText(0, "1.cpp"); qtreewidgetitem4->addChild(qtreewidgetitem6); QTreeWidgetItem *qtreewidgetitem7 = new QTreeWidgetItem(qtreewidgetitem4); qtreewidgetitem7->setText(0, "2.cpp"); qtreewidgetitem4->addChild(qtreewidgetitem7); //resource file QTreeWidgetItem *qtreewidgetitem8=new QTreeWidgetItem(treeWidget); qtreewidgetitem8 = treeWidget->topLevelItem(2); qtreewidgetitem8->setText(0, "resource file"); QTreeWidgetItem *qtreewidgetitem9 = new QTreeWidgetItem(qtreewidgetitem8); qtreewidgetitem9->setText(0, "1.ui"); qtreewidgetitem8->addChild(qtreewidgetitem9); QTreeWidgetItem *qtreewidgetitem10 = new QTreeWidgetItem(qtreewidgetitem8); qtreewidgetitem10->setText(0, "2.ui"); qtreewidgetitem8->addChild(qtreewidgetitem10); //Other documents QTreeWidgetItem *qtreewidgetitem11=new QTreeWidgetItem(treeWidget); qtreewidgetitem11 = treeWidget->topLevelItem(3); qtreewidgetitem11->setText(0, "Other documents"); QTreeWidgetItem *qtreewidgetitem12 = new QTreeWidgetItem(qtreewidgetitem11); qtreewidgetitem12->setText(0, "other"); qtreewidgetitem11->addChild(qtreewidgetitem12); treeWidget->setSortingEnabled(sortingEnabled); textEdit->setHtml(QApplication::translate("MainWindow", "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\" \"http://www.w3.org/TR/REC-html40/strict.dtd\">\n" "<html><head><meta name=\"qrichtext\" content=\"1\" /><style type=\"text/css\">\n" "p, li { white-space: pre-wrap; }\n" "</style></head><body style=\" font-family:'SimSun'; font-size:9pt; font-weight:400; font-style:normal;\">\n" "<p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\">#include <iostream></p>\n" "<p style=\"-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\"><br /></p>\n" "<p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\">using namespace std;</p>\n" "<p style=\"-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\"><br /></p>\n" "<p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; m" "argin-right:0px; -qt-block-indent:0; text-indent:0px;\">int main()</p>\n" "<p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\">{</p>\n" "<p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\"> cout<<"Hello World !"<<endl;</p>\n" "<p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\"> return 0;</p>\n" "<p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\">}</p></body></html>", Q_NULLPTR)); textEdit_2->setHtml(QApplication::translate("MainWindow", "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\" \"http://www.w3.org/TR/REC-html40/strict.dtd\">\n" "<html><head><meta name=\"qrichtext\" content=\"1\" /><style type=\"text/css\">\n" "p, li { white-space: pre-wrap; }\n" "</style></head><body style=\" font-family:'SimSun'; font-size:9pt; font-weight:400; font-style:normal;\">\n" "<p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\">\350\276\223\345\207\272\347\273\223\346\236\234\357\274\232Hello World !</p></body></html>", Q_NULLPTR)); // retranslateUi }
Complete project:
GitHub Download: https://github.com/MarsXiaolei/QtCode/tree/9dab91562a54b8480873840f15b2074e6e7ba022/Splitter_2