Qt之表单布局(QFormLayout)

简述

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::DontWrapRows 0 输入框始终在标签旁边
QFormLayout::WrapLongRows 1 标签有足够的空间适应,如果最小大小比可用空间大,输入框会被换到下一行
QFormLayout::WrapAllRows 2 输入框始终在标签下边

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

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

QFormLayout::ItemRole枚举:

指定一排控件的类型

内容 描述
QFormLayout::LabelRole 0 标签
QFormLayout::FieldRole 1 输入框
QFormLayout::SpanningRole 2 跨越标签和输入框的控件

例如:

//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(栅格布局)更为方便些。

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

时间: 2024-11-03 19:02:59

Qt之表单布局(QFormLayout)的相关文章

表单布局的一个例子 DIV+CSS

css 这是昨天作的一个布局时的测试!感觉表单布局是很麻烦的事,想用最少的代码去解决问题是比较难! 这是一个例了,不知道有没有更好的解决办法,贴上来,随便看吧!  程序代码body{font-size:12px; line-height:1.9; text-align:center;}#info{border:1px solid #006699; background:#F9EBBB; text-align:left; margin:10px auto; width:300px; padding

div css表单布局的五个小技巧

核心提示:div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. div css表单布局的五个小技巧可以帮助你更灵活的控制表单,使页面更加满意. 1.表单文本输入的移动选择: 在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息.其实只要加入 代码到 <textarea> 中,一切就会变得简单多了,如: <textarea name=textarea wrap=virtual rows=2 cols=22 >Input Englis

表单设计:以表单布局与填写反馈为例

表单,主要是负责数据采集的功能,需要访问者自己去填写,如访问者的姓名.邮箱.性别.地址.留言建议.设置密码.管理个人账户等等.时下表单无处不在,成功的表单设计不仅能提高用户的满意度,更能收集更加精确的数据,相反失败的表单设计只会收集到错误杂乱的信息,可能会最终导致潜在用户的流失. 一.组织表单的内容,给用户一个友好的引导 首先要明确的告之用户填的是一个什么性质的表单以及填完后能做些什么?哪些问题是一定要问的?有没有别的途径可以获取用户的资料?大致表单的布局分为三种类型:纵向排列.逐步填写(多页显

Bootstrap表单布局样式代码_javascript技巧

废话不多说了,直接给大家贴代码了. <form class="form-horizontal" role="form"> <fieldset> <legend>配置数据源</legend> <div class="form-group"> <label class="col-sm-2 control-label" for="ds_host"&

BootStrap智能表单实战系列(四)表单布局介绍_javascript技巧

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是根据autoLayout来决定使用的栅格,通过设置autoLayout:'1,2,1,2,2,4' 表示 第一.二列占3格

Bootstrap表单布局_javascript技巧

Bootstrap 提供了下列类型的表单布局: •垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: •内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖排. •水平表单 -> 用栅格系统控制显示 一.垂直表单 垂直表单使用的标准步骤 1.<form> 元素添加 role="form". 2.把标签和控件放在一个带有"form-group"的<div> 中,获取最佳间距. 3.向所有的文

Bootstrap表单布局样式源代码_javascript技巧

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单创建垂直或基本表单:•·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-control 内联表单:内联表单中所有元素都向左对齐,标

Bootstrap三种表单布局的使用方法_javascript技巧

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单  创建垂直或基本表单: •·向父 <form> 元素添加 role="form".  •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的.  •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-control <form role=&q

第七篇Bootstrap表单布局实例代码详解(三种表单布局)_javascript技巧

Bootstrap提供了三种表单布局:垂直表单,内联表单和水平表单.下面逐一给大家介绍,有兴趣的朋友一起学习吧. 创建垂直或基本表单: •·向父 <form> 元素添加 role="form". •·把标签和控件放在一个带有 class .form-group 的 <div> 中.这是获取最佳间距所必需的. •·向所有的文本元素 <input>.<textarea> 和 <select> 添加 class .form-cont