Qt：在这种情况下应该使用什么布局或布局组合？

Question

我正在做一个 Qt 项目，对于这个项目，我需要设计这样的东西：

到目前为止，我已经在 Qt Creator 中进行了设计，并且我已经准备好了组件，但是当我尝试在不同的布局中添加小部件时，我没有得到我想要的形状。我应该怎么做才能使我的应用程序可调整大小？

渔获量：

• 侧边栏具有固定宽度，这意味着对于窗口大小的水平增加，侧边栏的水平宽度不会增加。侧边栏本身就是一个小部件。
• 上栏的垂直宽度是固定的（如果可能的话）。这意味着，在垂直窗口大小增加期间，上栏不能垂直变宽。而且它本身也是一个小部件。
• 侧边栏的小部件位于qstackedwidget。

Answer 1

嵌套布局：

（绿色方块 = QStackedWidget）

步骤：

[定义]

H(x, y, ...) = x, y, ...上的水平布局；其中 x, y, ... 是小部件(W#) 或 Layout(L#)

V(x, y, ...) = x, y, ... 上的水平布局；其中 x, y, ... 是小部件(W#) 或 Layout(L#)

• 第 1 步： V(W1, W2) = L1
• 第 2 步： H(W3, L1) = L2
• 第 3 步： V(W4, L2) = L3
• 第四步：设置L3为StackedWidget布局的当前页布局
• 第 5 步： H(W5, StackedWidget) = L4
• 第 6 步： H(W6, a spacer, W7) = L5
• 第 7 步： V（L5、L4）

注意 W6 和 W7 的水平尺寸是固定的（或在其上设置最大值），它们之间的 spacer 充当布局中唯一可调整大小的小部件L5.

---

这是层次结构：

Answer 2

只是为了好玩，代码版本，用最少的优化代码...

#include "mainwindow.h"

#include <QBoxLayout>
#include <QLabel>
#include <QStackedWidget>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
// Ingredients (taken from the mockup from top-left to bottom-right)
QFrame *upperBar = new QFrame;
QLabel *upperIcon = new QLabel("icon");
QLabel *profilePicture = new QLabel("profile picture");

QFrame *sideBar = new QFrame;
QLabel *sideItemA = new QLabel("Item A");
QLabel *sideItemB = new QLabel("Item B");

QStackedWidget *contentStack = new QStackedWidget;

QFrame *contentPage1 = new QFrame;
QLabel *page1WidgetA = new QLabel("I am widget A");
QLabel *page1WidgetB = new QLabel("I am widget B");
QLabel *page1WidgetC = new QLabel("I am widget C");
QLabel *page1WidgetD = new QLabel("I am widget D");

QWidget *centralWidget = new QWidget;

// The needed layouts:
QHBoxLayout *upperBarLayout = new QHBoxLayout;
QVBoxLayout *sideBarLayout = new QVBoxLayout;
QGridLayout *page1GridLayout = new QGridLayout;
QGridLayout *centralLayout = new QGridLayout;

// Let's connect the pieces:

/* First we setup the upperbar: */
upperBarLayout->addWidget(upperIcon, 1, Qt::AlignLeft);
upperBarLayout->addWidget(profilePicture, 3, Qt::AlignRight);
upperBar->setLayout(upperBarLayout);
upperBar->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);

/* Then we setup the sidebar: */
sideBarLayout->addWidget(sideItemA);
sideBarLayout->addWidget(sideItemB);
sideBarLayout->addStretch();
sideBar->setLayout(sideBarLayout);
sideBar->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Expanding);

/* Then we setup the content stacked widget */
page1GridLayout->addWidget(page1WidgetA, 0, 0, 3, 1);
page1GridLayout->addWidget(page1WidgetB, 0, 1, 1, 1);
page1GridLayout->addWidget(page1WidgetC, 1, 1, 2, 1);
page1GridLayout->addWidget(page1WidgetD, 3, 0, 1, 2);
contentPage1->setLayout(page1GridLayout);

contentStack->addWidget(contentPage1);
contentStack->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);

/* Finally we setup the main elements into the central layout... */
centralLayout->addWidget(upperBar, 0, 0, 1, 2);
centralLayout->addWidget(sideBar, 1, 0, 1, 1);
centralLayout->addWidget(contentStack, 1, 1, 1, 1);
centralWidget->setLayout(centralLayout);
setCentralWidget(centralWidget);

/* Let's color it a little to better realize the positioning: */
setStyleSheet("QWidget {"
              "border: 1px solid black;"
              "color: red"
              "}");
}

MainWindow::~MainWindow()
{

}

结果如下：