#qt #qwidget #qlayout
#qt #qwidget #qlayout
Вопрос:
Я работаю над проектом Qt, и для этого проекта мне нужно разработать что-то вроде этого:
Я уже разработал в Qt Creator, и у меня есть готовый компонент, но когда я пытаюсь добавить виджет в разные макеты, я не получаю желаемые формы. Что я должен сделать, чтобы изменить размер моего приложения?
Ловит:
- Боковая панель имеет фиксированную ширину, что означает, что при увеличении размера окна по горизонтали ширина боковой панели по горизонтали не будет увеличиваться. Боковая панель сама по себе является виджетом.
- вертикальная ширина верхней панели фиксирована (если это возможно). Это означает, что при увеличении размера окна по вертикали верхняя панель не может стать шире по вертикали. И сам он также является виджетом.
- виджеты рядом с боковой панелью находятся в
qstackedwidget.
Комментарии:
1. Я хочу, чтобы ширина боковой панели была фиксированной, по крайней мере. И, если возможно, ширину верхней панели. Что мне делать? Такой дизайн легко возможен с помощью веб-фреймворка, может ли QT что-то сделать?
2. Да, Qt может это сделать. Это делает мой предыдущий ответ полностью устаревшим, я отредактирую его, и, возможно, вам также следует отредактировать свой вопрос, удалив предыдущую версию и прояснив ее. Вы не должны делать такого рода вещи снова, это очень плохой поступок в SO.
3. Полностью извините, я догадался, поскольку боковые панели обычно имеют фиксированную ширину, мне не нужно будет упоминать в явном виде. Я был неправ.
4. Я обновил свой ответ, чтобы он был версией виджета stacked, пожалуйста, проверьте и посмотрите, есть ли у вас какие-либо дополнительные проблемы. Кроме того, боковая панель должна предоставлять некоторые соответствующие сигналы для переключения между различными страницами
QStackedWidget.
Ответ №1:
Вложенные макеты:
(зеленый квадрат = QStackedWidget )
Шаги:
[Определение]
H(x, y, …) = горизонтальные макеты на x, y, …; где x, y, … — это виджет (W #) или Макет (L #)
V(x, y, …) = горизонтальные макеты на x, y, …; где x, y, … — это виджет (W #) или Макет (L #)
- Шаг 1: V (W1, W2) = L1
- Шаг 2: H (W3, L1) = L2
- Шаг 3: V (W4, L2) = L3
- Шаг 4: Установите L3 в качестве макета текущей страницы макета StackedWidget
- Шаг 5: H(W5, StackedWidget) = L4
- Шаг 6: H (W6, разделитель, W7) = L5
- Шаг 7: V (L5, L4)
Обратите внимание, что W6 и W7 имеют фиксированный размер по горизонтали (или задают для него максимальный), разделитель между ними действует как единственный изменяемый размер виджета в макете L5.
И вот иерархия:
Комментарии:
1. Есть ли какой-либо способ заставить widget_5 иметь фиксированный размер? И могу ли я сделать widget_1, widget_2, widget_3, widget_4 частью окна стека?
2. Что вы имеете в виду под «стековым окном»? Предполагается, что стекированные окна должны быть » сложены «, в то время как на вашем изображении widget_1 ~ 4 являются » отдельными «.
3. @ShakibAhmed Если вы пытаетесь создать новый макет, в котором widget_1 ~ 4 расположены вместе в стекированном окне, ответ — да . Но вы должны были просто запросить версию стекового окна вместо текущей версии в своем вопросе.
4. Извините, во-первых, извините, потому что я написал stacked window, я имел в виду stacked widget. (Ошибаться — это по-человечески) Во-вторых, да, я должен был написать это в своем вопросе.
5. Отличное объяснение, и мой пользовательский интерфейс работает! Впервые макет Qt кажется простым!
Ответ №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()
{
}
Вот результат:
