十一布局管理

zhlei_12345

已于 2022-02-21 22:13:19 修改

阅读量578

点赞数

分类专栏： Qt教程文章标签： qt 开发语言

于 2022-01-24 10:46:46 首次发布

原文链接：http://c.biancheng.net/view/9422.html

版权

Qt教程专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

前言
一、五种布局管理器
QVBoxLayout 垂直布局
QHBoxLayout水平布局
QGridLayout 布局
QFormLayout 表单布局
QStackedLayout分组布局

前言

Qt提供了很多拜访控件的辅助工具
主布局和子布局

条目	代码	说明(Creator操作)
主布局	widget::setLayout	creator 对话框编辑器上面的
子副局	widget::addLayout	子布局

一、五种布局管理器

在这里插入图片描述

QVBoxLayout 垂直布局

VBox布局

QVBoxLayout();
QVBoxLayout(QWidget* parent);

简易使用方法

//1.主要窗口
QWidget wid；
wid.setWindowTitle（"垂直布局"）;
//2.new QVBoxLayout 
QVBoxLayout *layout = new QVBoxLayout();
layout->setDirection(QBoxLayout::BottomToTop);
//3 窗口包含layout
wid.setLayout(layout );
//4. layout 包含控件
layout->addStretch(2);
layout->addWidget(&lab1,1)
layout->addWidget(&lab2,1)
layout->addStretch(1);

函数

成员函数	功能
添加控件	—说明—
addWidget	向布局中增加widget控件
	addWidget(QWidget*,int stretch)
	stretch = 就是未来的占位比例
添加空白	—说明—
addStretch（int strech）	添加空白行
addSpacing（int size）	添加一个固定大小size的间距
设置距离	—说明—
setMargin(int margin)	设置自己的边界
setContentsMargins	设置内部控件的边界
factor	—说明—
setStretchFactor(QWidget *widget, int stretch)	设置控件比列
setStretchFactor(QLayout *layout, int stretch)	设置内部布局比列

qtCreator设置
4.1 设置布局
在qtCreator 设计器的上面就可以设置窗口的布局 = wid->setLayout(&lay);

编辑器设置布局	主布局代码 setLayout
	QWidget widget; QVBoxLayout layout = new QVBoxLayout(); widget.setLayout(layout );*

另外，控件面板上的QVBoxLayout 实际上是子级布局

主布局widLayout	子布局 childLayout

wid->setLayout(widLayout)	widLayout->addLayout(childLayout);

4.2 设置stretch
这里一共5个控件布置在主布局QVBoxLayout中
在属性中的设置为

控件	比例	其他
v-spacer	0	固定高度45 详细见下图
label	1	TextLabel1
label	2	TextLabel2
label	3	TextLabel3
OK-CANCEL	1

窗口	属性设置比列

a.第一个控件：spacer的固定高度设置为45，其stretch = 0	特别:如果其他不设置stretch，spacer就会无限占位
b.第二个控件：Lab，stretch = 1
c.第三个控件：Lab，stretch = 2
c.第四个控件：buttons，stretch = 1	对于button，展位是增大的，但是不会上下扩展

Spacer设置	Spacer控件列表


Spacer=固定大小占位，stretch=0

4.3 例子

 //创建Lab 使用 setStyleSheet设置样式
 //连续创建 3 个文本框，并设置它们的背景和字体大小
    QLabel lab1("Label1");
    lab1.setStyleSheet("QLabel{background:#dddddd;font:20px;}");
    lab1.setAlignment(Qt::AlignCenter);
    QLabel lab2("Label2");
    lab2.setStyleSheet("QLabel{background:#cccccc;font:20px;}");
    lab2.setAlignment(Qt::AlignCenter);
    QLabel lab3("Label3");
    lab3.setStyleSheet("QLabel{background:#ffffff;font:20px;}");
    lab3.setAlignment(Qt::AlignCenter);
    
  //将 3 个文本框和 2 个空白列添加到管理器中，它们的拉伸系数比是 2:1:2:3:3
    layout->addStretch(2);
    layout->addWidget(&lab1,1);
    layout->addWidget(&lab2,2);
    layout->addWidget(&lab3,3);
    layout->addStretch(3);
    widget.setLayout(layout);
    widget.show();

4.4 QLabel的设置

setStyleSheet使用

改背景颜色	qtCreator + 代码
	lab.setStyleSheet("QLable{background:rgb(170,0,0);}")
	差别: 是否需要QLabel{XXX} 这个标志

QHBoxLayout水平布局

在这里插入图片描述

主要函数与VBox相同
函数

hbox.addWidget(QWidget*);
hbox.addStretch(int );
Window.setLayout(hbox);

QGridLayout 布局

在这里插入图片描述
函数

QGridLayout成员函数	功能
查询函数	-----说明------
rowCount()	行数
columnCount()	列数
添加控件	-----说明------
addWidget()	(QWidget *widget, int row, int column) 在row col位置添加控件
addWidget()	fromRow, int fromColumn, int rowSpan, int columnSpan, 跨行列
添加子布局	-----说明------
addLayout()	QLayout *layout, int row, int column, int rowSpan, int columnSpan,添加子布局
设置stretch	-----说明------
setColumnStretch(int column, int stretch)	设置列的stretch
setRowStretch(int row, int stretch)	设置行的stretch

addWidget(ctrl,row,column);直接指定位置，不用先设置有多少行列

 QGridLayout *layout = new QGridLayout;
   //向 layout 中添加控件，并指定各个控件的位置
   layout->addWidget(but1, 0, 0);
   layout->addWidget(but2, 0, 2);
   layout->addWidget(lab3, 1, 0, 3, 3);
   layout->addWidget(but3, 4, 0);
   layout->addWidget(but4, 4, 2);
   //将 layout 添加到 widget 窗口中
   widget.setLayout(layout);

QFormLayout 表单布局

左边是QLabel 右边是控件
函数

函数	说明
添加	-----说明-----
addRow(QWidget label, QWidget field)	左边label 右边field
addRow(const QString &labelText, QWidget *field)	左边label 右边field
insertRow(int row, const QString &labelText, QWidget *field)	左边label 右边field
删除	-----说明-----
removeRow(int row)
换行策略	-----说明-----
setRowWrapPolicy(RowWrapPolicy policy)	DontWrapRows 标签始终在左 WrapLongRows标签可以在左也可以在上 WrapAllRows标签始终在上

在这里插入图片描述

例子说明

函数	说明
	标签始终在上面setRowWrapPolicy(QFormLayout::WrapAllRows) 添加一行layout->addRow(“Name:”,new QLineEdit()); 间距setSpacing(10);

    QFormLayout* layout = new QFormLayout();
    //设置表单中的标签都位于控件的上方
    layout->setRowWrapPolicy(QFormLayout::WrapAllRows);
    //添加 3 行输入框和标签
    layout->addRow("Name:",new QLineEdit());
    layout->addRow("Email:",new QLineEdit());
    layout->addRow("Adress:",new QLineEdit());
    //设置行间距和列间距为 10
    layout->setSpacing(10);
    //将 layout 表单添加到 widget 窗口中
    widget.setLayout(layout);

QStackedLayout分组布局

在这里插入图片描述

 QHBoxLayout *layout=new QHBoxLayout;
   
    //创建一个列表
    QListWidget listWidget(&widget);
    listWidget.setMinimumWidth(150);
    listWidget.setFont(QFont("宋体",14));
    listWidget.addItem("QPushButton");
    listWidget.addItem("QLabel");
    listWidget.addItem("QLineEdit");
   
    //新建 3 个窗口，分别放置文本框、按钮和单行输入框
    QWidget widget1;
    widget1.setMinimumSize(400,400);
    QPushButton but1("这是一个按钮",&widget1);
    QWidget widget2;
    widget2.setMinimumSize(400,400);
    QLabel lab1("这是一个文本框",&widget2);
    QWidget widget3;
    widget3.setMinimumSize(400,400);
    QLineEdit edit("这是一个单行输入框",&widget3);
   
    //创建一个分组布局，将 3 个窗口添加到分组控件中
    QStackedLayout *stackedLayout = new QStackedLayout;
    stackedLayout->addWidget(&widget1);
    stackedLayout->addWidget(&widget2);
    stackedLayout->addWidget(&widget3);
   
    //layout 第一列添加 QListWidget 控件，第二列添加分组布局控件，设置它们的伸缩系数比为 1:4
    layout->addWidget(&listWidget,1);
    layout->addLayout(stackedLayout,4);
    //将 layout 水平布局控件添加到 widget 窗口中
    widget.setLayout(layout);
    widget.show();