Qt之表单布局(QFormLayout)

摘要:
简要描述由QFormLayout管理的输入控件和相关标签组成的表单。QFormLayout是一个方便的布局类,其中控件以两列的形式排列。公共接口setRowWrapPolicy设置换行策略QFormLayout::RowWapPolicy枚举:控制表中单行的显示策略。QFormLayout::ItemRole枚举:指定一行控件的类型内容值描述QFormLayout::LabelRole0标签QFormLayer::FieldRole1输入框QFormLaure::SpanningRole2跨越标签和输入框的控件example://pLayout-˃添加行;pLayout-˃setWidget;pLayout-˃setWidget;设置间距设置水平间距设置垂直间距设置间距QWidget*QFormLayout::labelForField通过字段获取与字段对应的标签。这不一定是QLabel,返回值是QWidget。结论当要设计的界面类似于两列几行的形式时,使用QFormLayout比使用QGridLayout更方便。
简述

QFormLayout管理输入型控件和关联的标签组成的那些Form表单。

QFormLayout是一个方便的布局类,其中的控件以两列的形式被布局在表单中。左列包括标签,右列包含输入控件,例如:QLineEdit、QSpinBox等。

使用

我们可以通过addRow(const QString &labelText, QWidget *field)来创建一个带有给定文本的QLabel及QWidget控件行,它们可以自动的设置为伙伴关系。

QFormLayout *pLayout = new QFormLayout();
pLayout->addRow(QStringLiteral("用户名:"), pUserLineEdit);
pLayout->addRow(QStringLiteral("密码:"), pPasswordLineEdit);
pLayout->addRow(QStringLiteral("验证码:"), pVerifyLineEdit);
pLayout->setSpacing(10);
pLayout->setMargin(10);
setLayout(pLayout);

使用QGridLayout格栅布局编写的比较:

QLabel *pUserNameLabel = new QLabel(this);
QLabel *pPasswordLabel = new QLabel(this);
QLabel *pVerifyLabel = new QLabel(this);

pUserNameLabel->setText(QStringLiteral("用户名:"));
pPasswordLabel->setText(QStringLiteral("密码:"));
pVerifyLabel->setText(QStringLiteral("验证码:"));

QGridLayout *pLayout = new QGridLayout();
pLayout->addWidget(pUserNameLabel, 0, 0);
pLayout->addWidget(pUserLineEdit, 0, 1);
pLayout->addWidget(pPasswordLabel, 1, 0);
pLayout->addWidget(pPasswordLineEdit, 1, 1);
pLayout->addWidget(pVerifyLabel, 2, 0);
pLayout->addWidget(pVerifyLineEdit, 2, 1);
pLayout->setSpacing(10);
pLayout->setMargin(10);
setLayout(pLayout);

很显然,功能可以实现,但是代码量大了很多。

常用接口
  • setRowWrapPolicy(RowWrapPolicy policy)

    设置换行策略

QFormLayout::RowWrapPolicy枚举:

控制表单行的显示策略。

内容描述效果
QFormLayout::DontWrapRows0输入框始终在标签旁边这里写图片描述
QFormLayout::WrapLongRows1标签有足够的空间适应,如果最小大小比可用空间大,输入框会被换到下一行这里写图片描述
QFormLayout::WrapAllRows2输入框始终在标签下边这里写图片描述

  • setWidget(int row, ItemRole role, QWidget *widget)

    设置行row所对应的控件,如果role为LabelRole时,设置的为标签所对应的控件,如果role为FieldRole时,设置的为输入框所对应的控件。

QFormLayout::ItemRole枚举:

指定一排控件的类型

内容描述
QFormLayout::LabelRole0标签
QFormLayout::FieldRole1输入框
QFormLayout::SpanningRole2跨越标签和输入框的控件

例如:

//pLayout->addRow(pUserNameLabel, pUserLineEdit);
pLayout->setWidget(0, QFormLayout::LabelRole, pUserNameLabel);
pLayout->setWidget(0, QFormLayout::FieldRole, pUserLineEdit);

  • setSpacing(int spacing)
  • setHorizontalSpacing(int spacing)
  • setVerticalSpacing(int spacing)

    设置间距(水平间距、垂直间距)


  • QWidget * QFormLayout::labelForField(QWidget * field)

    通过field获取field对应的标签,这里不一定是QLabel,返回值为QWidget。

总结

当要设计的界面是一种类似于两列和若干行组成的形式时,使用QFormLayout(表单布局)要比QGridLayout(栅格布局)更为方便些。

当界面元素较为复杂时(多行多列),应毫不犹豫的尽量使用栅格布局,而不是使用水平和垂直布局的组合或者嵌套的形式,因为在多数情况下,后者往往会使“局势”更加复杂而难以控制。栅格布局赋予了界面设计器更大的自由度来排列组合界面元素,而仅仅带来了微小的复杂度开销。

免责声明:文章转载自《Qt之表单布局(QFormLayout)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇CSS函数使用,里面有clip-path使用画各种多边形的原理和示例哦centos平台scp通过密钥远程复制文件(免密登录)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

第二百一十三节,jQuery EasyUI,NumberBox(数值输入框)组件

jQuery EasyUI,NumberBox(数值输入框)组件 功能:只能输入数值,和各种数值的计算 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 NumberBox(数值输入框)组件的使用方法,这个组件依赖 于 ValidateBox(验证框)组件。 一.加载方式 class 加载方式...

一句JS搞定只允许输入数字和字母

一句JS搞定输入框只允许用户输入数字和字母类型的内容,对象是input输入框,当然也可以其它对象,只不过input输入框用的频率非常高。一句代码,不信么?那就看下边代码: <INPUT class=input maxLength=12 size=15 name=username id="username" onKeyUp="value=value.r...

在react项目中使用回车键(Enter)实现tab切换输入框的功能(以及Don't make functions within a loop no-loop-func的问题)

在这碰到的一个问题就是代码在正常的HTML文件中是没有什么问题的,但是当代码放到react项目中就会报警告Don't make functions within a loop no-loop-func(其实大致的意思就是说不要在循环中生成或嵌套函数),可能是严格模式的原因。实现方式只需要需要添加这个效果的输入框加上一个class名‘input‘,这边使用过...

Python——PYQT:控件基本使用

QtGui.QComboBox控件常用函数: .addItem(string) #添加字符串项到Item .addItems(list) #添加列表或元组元素到Item .clear() #清除所有Item .clearEditText() #清除编辑框内容 .count() #返回Item数目 .currentIndex...

unity 调用 安卓 输入法,去掉 输入框

在unity下调用inputfield出来的输入法是默认的,有一个输入框很不美观。如下图: 我改进之后是这样的,如下图 首先是调用一个库文件 https://github.com/mopsicus/unity-keyboard-hack 使用技巧: 因为我们有的时候希望点屏幕 ,让键盘消失。所以注意调用 close文件 下面是演示操作 链接 https...

Antd Form表单中Input输入框 在IE9下按下任何按键都会报校验失败

antd Form表单中Input输入框 在IE9下按下任何按键都会报校验失败,导致输入框输入不了任何内容! 可能你的react及react-dom版本由于过高导致antd组件不能兼容,需要对react及react-dom进行降级处理; 在这里附上我的版本号: "antd": "^2.13.14", "react": "^16.2.0","react-d...