Как просто разместить заголовок и некоторый контент под ним в Qt Designer?

Question

Дизайнер QtCreator позволяет графически редактировать пользовательский интерфейс. Я просто пытался сделать какой-то смысл - то, что я хотел был текст заголовка по центру в середине и некоторые виджет под ним, как это:

Но мои результаты выглядят так, при использовании вертикальной расположение:

Я поместил QLabel сверху и QOpenGLWidget внизу - я использовал только QOpenGlWidget, потому что он имеет черный фон на скриншоте. Я действительно планирую использовать другой QWidget. Тогда я использовал вертикальную компоновку. Итак, как мне получить результат на первом изображении, используя QLabel и QWidget?

Answer 1

Использование Qt XML не является заменой HTML.

HTML предназначен для маркировки веб-страниц. Виджеты Qt - это не веб-страницы!

Похоже, что вы смотрите на коробку с текстом «content» и думаете об общем виджетах. Я вижу это и вижу QLabel, который все-таки получен из QWidget.

Возможно, легче объяснить в коде, как бы я это сделал, и затем вы можете перевести его на то, чтобы сделать то же самое в Qt Creator.

int main(int argc, char *argv[]) 
{ 
    QApplication a(argc, argv); 

    // Create a root widget (this could also be a QMainWindow, or any other widget) 
    QWidget* pWidget = new QWidget; 

    // Layout to arrange the widgets vertically 
    QVBoxLayout* pBoxLayout = new QVBoxLayout; 
    pWidget->setLayout(pBoxLayout); 

    // The header widget 
    QLabel* pHeader = new QLabel("Header"); 
    pHeader->setAlignment(Qt::AlignCenter); 
    pHeader->setMinimumSize(200, 20); 
    pHeader->setMaximumSize(200, 20); 
    QFont font = pHeader->font(); 
    font.setBold(true); 
    font.setPixelSize(16); 
    pHeader->setFont(font); 

    // the content widget 
    QLabel* plabel = new QLabel("content"); 
    plabel->setMinimumSize(200, 200); 
    plabel->setMaximumSize(200, 200); 
    plabel->setStyleSheet("background-color: rgb(182, 182, 182); border: 5px solid black;"); 
    plabel->setAlignment(Qt::AlignCenter); 

    pBoxLayout->addWidget(pHeader); 
    pBoxLayout->addWidget(plabel); 

    pWidget->show(); 

    return a.exec(); 
} 

Как вы можете видеть здесь, я разработал виджет содержания с использованием таблицы стилей. Это самый простой способ, после небольшого количества практики с ними.

Полученный код создает виджет, который выглядит следующим образом: -

Вы можете играть с размерами и шрифтами, чтобы соответствовать исходному изображению точно.