C++跨平台库QT学习3 UI进行简单布局实例

QT 使用代码创建UI实例

    • 一、代码获取屏幕分辨率
    • 二、通过代码创建一些控件
    • 三、界面UI布局实例
      • 1. 从网上找一个监控系统的布局来学习一下UI布局,效果图如下:
      • 2. 主样式表:
      • 3. 控件层次:
      • 4. 主要的属性设置:

一、代码获取屏幕分辨率

 	    // 设置宽度
        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布局,效果图如下:

C++跨平台库QT学习3 UI进行简单布局实例_第1张图片

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. 控件层次:

C++跨平台库QT学习3 UI进行简单布局实例_第2张图片

4. 主要的属性设置:

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

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

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

你可能感兴趣的:(QT)