Add DockWidget on Main Window

Question

This is my UI

I hope I could move red border to left or right in the picture by mouse when the program run.

How should I do?

Answer 1

Add all those widgets to the form in the UI designer. Select text edit widget and list widget. Select "Lay Out Horizontally in Splitter" from the top toolbar. Then select the form itself and select "Lay Out Vertically" from the top toolbar. That's it, except the list widget is not dockable.

Edit:

If you want to keep the list widget at constant size (so that it is resized only by the user), tell the QSplitter the stretch factors of the widgets, for example like this:

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent), ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // index 0 is the text edit, stretch factor is 1 (= all stretching goes here)
    ui->splitter->setStretchFactor(0, 1); 

    // index 1 is the list widget, stretch factor is 0
    ui->splitter->setStretchFactor(1, 0);
}