bootstrap4 网格布局实例_C++跨平台库QT学习3 UI进行简单布局实例

一、代码获取屏幕分辨率

     // 设置宽度        QList list = QGuiApplication::screens();        const int width  = list[0]->geometry().width();        const int height = list[0]->geometry().height();        resize(width,height);   // 重置窗口 最大化

二、通过代码创建一些控件

#include "mainwindow.h"#include "ui_mainwindow.h"#include #include #include #include #include #include #include #include #include #include #include MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) , ui(new Ui::MainWindow){    // 设置宽度    QList list = QGuiApplication::screens();    const int width  = list[0]->geometry().width();    const int height = list[0]->geometry().height();    resize(width,height);    // 因为QMainWindow自带了Layout，直接设置Layout无效，所以嵌套一个QWidget    QWidget *m_parent = new QWidget();    // 自定义网格布局    QGridLayout * layout = new QGridLayout(this);    // 建立控件    QFrame *frame = new QFrame(this);    layout->addWidget(frame);    layout->addWidget(new QLabel("测试系统",frame),0,0);    layout->addWidget(new QLabel("manage system",this),0,1);    layout->addWidget(new QLabel("Left",this ),1,0);    layout->addWidget(new QLabel("right",this),1,1);    layout->setRowStretch(0, 1);    layout->setRowStretch(1, 10);    layout->setColumnStretch(0,1);    layout->setColumnStretch(1,8);    m_parent->setLayout(layout);    this->setCentralWidget(m_parent);}MainWindow::~MainWindow(){    delete ui;}

三、界面UI布局实例

1. 从网上找一个监控系统的布局来学习一下UI布局，效果图如下：

2. 主样式表：

QWidget#widget_top{   background:#23a489;}QWidget#widget_left{   background:#333;}QWidget{   background:#000}QLabel{   color:#fff;   background:transparent;font-size:20px;width:200px;height:30px}QWidget#widget_control{background:#333}

3. 控件层次：

4. 主要的属性设置：

layout的边距基本都设置为了0

• layoutLeftMargin:0
• layoutTopMargin:0
• layoutRightMargin:0
• layoutBottomMarin:0
• layoutHorizontalSpacing:0
• layoutVerticalSpacing:0

sizePolicy是重点，要根据情况设置Expanding