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