【Qt】常用控件（二十）QFormLayout，QSpacerItem的属性和使用，控件小结

小编个人主页详情—请点击小编个人gitee代码仓库—请点击Qt系列专栏—请点击倘若命中无此运孤身亦可登昆仑送给屏幕面前的读者朋友们和小编自己!目录前言一、QFormLayoutQFormLayout的介绍QFormLayout的使用填写表单的实现二、QSpacerItemQSpacerItem的属性QSpacerItem的使用在控件之间添加空白三、控件小结总结前言【Qt】常用控件十九QGridLayout的属性和使用——书接上文 详情请点击——本文由小编为大家介绍——【Qt】常用控件二十QFormLayoutQSpacerItem的属性和使用控件小结一、QFormLayoutQFormLayout的介绍QFormLayout是表单布局管理器用于实现两列表单的布局也就是N行两列的布局多用于让用户填写信息填表填写调查问卷等场景左侧为提示标签QLabel右侧为一个QLineEidt输入框或者QRadioButton单选按钮或者QCheckBox复选按钮等同样的对于这里的QFormLayout表单布局管理器我们也可以类比一下前端中也有这样表单的布局概念有一个form标签那么通过这个form标签搭配其它的input标签那么也就可以实现在网页端让用户根据提示信息输入数据点击提交之后提交到服务器上进行处理其实更准确来讲QFormLayout是属于QGridLayout网格布局管理器的特殊情况如何理解呢对于一个QGridLayout网格布局管理器来讲我仅仅设置一个N行2列的布局也就和QFormLayout的效果一致了所以我们说QFormLayout是属于QGridLayout网格布局管理器的特殊情况QFormLayout的使用填写表单的实现那么我们在了解了QFormLayout之后我们想要基于QFormLayout实现一个表单的填写也就是有两列第一列为姓名性别年龄第二列为对应的三个单行输入框所以接下来我们创建一个项目名为QFormLayout基类为QWidget派生类为Widget的项目#includewidget.h#includeui_widget.h#includeQLabel#includeQLineEdit#includeQFormLayoutWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QFormLayout*layoutnewQFormLayout();this-setLayout(layout);QLabel*label1newQLabel(请输入姓名);QLabel*label2newQLabel(请输入性别);QLabel*label3newQLabel(请输入年龄);QLineEdit*edit1newQLineEdit();QLineEdit*edit2newQLineEdit();QLineEdit*edit3newQLineEdit();layout-addRow(label1,edit1);layout-addRow(label2,edit2);layout-addRow(label3,edit3);}Widget::~Widget(){deleteui;}那么在Widget的构造函数中先创建表单布局管理器使用setLayout给主界面对应的Widget窗口设置表单布局管理器将表单布局管理器添加到Widget窗口中我们是要创建一个三行两列的界面第一列为QLabel标签对应的姓名性别年龄所以我们先创建好三个QLabel并且分别设置为姓名性别年龄对应的文本第二列为对应的三个单行输入框所以此时我们创建好三个单行输入框即可接下来我们使用addRow按行添加控件由于表单是N行2列的布局所以注定了使用addRow按行添加控件一次添加两列对应的两个控件那么addRow的第一个参数是label所以我们将第一列对应的姓名性别年龄对应的QLabel依次传入那么addRow的第二个参数是QWidget类型所以此时我们将对应的三个单行输入框依次传入即可运行结果如下所以此时Widget窗口上就呈现了三行两列的布局但是乍一看这个布局右侧的单行输入框属实有点长了别忘了表单布局管理器是可以按照Widget窗口的大小去让处于表单布局管理器的控件自适应的调整位置和尺寸的所以此时我们可以手动拖拽Widget窗口的大小让Widget窗口变小一点那么自然的处于表单布局管理器的控件会根据Widget窗口的大小去自适应的调整位置和尺寸所以此时单行输入框就变短了不少也美观了不少所以按照提示信息我们依次输入姓名性别年龄即可填写完成之后小编下意识的就想点击提交嘶好像少一个提交按钮呀#includewidget.h#includeui_widget.h#includeQLabel#includeQLineEdit#includeQFormLayout#includeQPushButtonWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QFormLayout*layoutnewQFormLayout();this-setLayout(layout);QLabel*label1newQLabel(请输入姓名);QLabel*label2newQLabel(请输入性别);QLabel*label3newQLabel(请输入年龄);QLineEdit*edit1newQLineEdit();QLineEdit*edit2newQLineEdit();QLineEdit*edit3newQLineEdit();layout-addRow(label1,edit1);layout-addRow(label2,edit2);layout-addRow(label3,edit3);QPushButton*buttonnewQPushButton(提交);layout-addRow(nullptr,button);}Widget::~Widget(){deleteui;}所以接下来我们创建一个按钮并且设置显示的文本为提交接下来就需要调用addRow将按钮添加到表单布局管理器中了嘶可是我们仔细想一下提交按钮左侧的一列不需要有任何控件所以对于addRow的第一个参数我们传入nullptr空即可那么对于addRow的第二个参数我们将创建好的按钮传入即可这里我们也可以看出对于表单布局管理器的右侧的一列其实不一定非得传入单行输入框其实这里我们传入按钮以及多行输入框单选按钮复选按钮等都可以运行结果如下那么此时我们就可以按照提示信息我们依次输入姓名性别年龄即可填写完成之后点击提交不过小编对于这里的提交按钮被点击之后对应的点击信号并没有设置槽函数所以不会有任何的反馈感兴趣的读者友友可以自定实现一下诸如打印输入的姓名性别年龄等信息同样的感兴趣的读者友友也可以把性别对应的单行输入框也可以调整成为两个单选按钮对应的文本为男女那么这里小编就不过多演示了二、QSpacerItemQSpacerItem的属性当我们使用布局管理器的时候可能仅仅给行尺寸和列尺寸设置拉伸系数不能够满足我们的需求我们可能需要在两个控件之间添加一段空白所以这段空间就可以使用QSpacerItem来进行表示值得注意的是QSpacerItem并不是布局管理器我们可以将QSpacerItem当做一个布局管理器的辅助工具下面我们来介绍一下QSpacerItem的相关属性1width空白的宽度单位是像素px……1关于像素的讲解在第八点Qt坐标系的认识中的第13小点中进行的讲解详情请点击——……2关于位置和尺寸在第一点QWidget的geometry中的geometry中进行的讲解详情请点击——2height空白的高度单位是像素px3hData水平方向对应的列尺寸的sizePolicy4vData垂直方向对应的行尺寸的sizePolicy关于hData和vData两个属性对应的sizePolicy都是相同的如下……1QSizePolicy::Ignored完全忽略控件本身的尺寸由布局管理器自由设置控件的尺寸……2QSizePolicy::Minimum控件尺寸的最小值那么在布局管理器设置控件尺寸的时候不会小于该值……3QSizePolicy::Maximum控件尺寸的最大值那么在布局管理器设置控件尺寸的时候不会大于该值……4QSizePolicy::Preferred控件尺寸的理想值布局管理器先给控件的尺寸计算出一个理想值那么在给控件设置尺寸的时候就会尽可能的接近理想值……5QSizePolicy::Expanding控件的尺寸尽可能的扩展……6QSizePolicy::Shrinking控件的尺寸尽可能的收缩QSpacerItem的使用在控件之间添加空白那么我们接下来想要基于QSpacerItem在控件之间添加空白所以此时我们先使用水平布局管理器QHBoxLayout管理两个按钮关于水平布局管理器在第二点QHBoxLayout中进行的讲解详情请点击——#includewidget.h#includeui_widget.h#includeQHBoxLayout#includeQPushButtonWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QHBoxLayout*layoutnewQHBoxLayout();this-setLayout(layout);QPushButton*button1newQPushButton(按钮1);QPushButton*button2newQPushButton(按钮2);layout-addWidget(button1);layout-addWidget(button2);}Widget::~Widget(){deleteui;}那么在Widget的构造函数中先创建水平布局管理器使用setLayout给主界面对应的Widget窗口设置水平布局管理器将水平布局管理器添加到Widget窗口中那么接下来我们再创建两个按钮并且设置显示的文本然后将这个两个按钮使用addWidget添加到水平布局管理器中即可运行结果如下所以此时两个按钮就呈现水平排布#includewidget.h#includeui_widget.h#includeQHBoxLayout#includeQPushButtonWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QHBoxLayout*layoutnewQHBoxLayout();this-setLayout(layout);QPushButton*button1newQPushButton(按钮1);QPushButton*button2newQPushButton(按钮2);QSpacerItem*spacernewQSpacerItem(400,20);layout-addWidget(button1);layout-addSpacerItem(spacer);layout-addWidget(button2);}Widget::~Widget(){deleteui;}我们想要实现的是在这两个按钮中间添加一段空白所以此时我们就要先创建空白对应的QSpacerItem对象spacer那么我们来看QSpacerItem的构造函数此时第一个参数就是width要求我们传入空白的宽度单位是像素所以此时我们对于宽度传入400第二个参数就是height高度要求我们传入空白的高度单位是像素那么此时我们对于高度传入20即可在创建好空白之后接下来我们就要使用addSpacerItem将QSpacerItem空白对象spacer添加到水平布局管理器中那么这里有细节需要注意如果我们期望将空白添加到两个控件的中间那么这里就需要先添加第一个控件然后再添加空白接下来再添加第二个控件即如果想要空白在两个控件的中间那么添加空白要在添加两个控件的顺序的中间进行添加运行结果如下所以此时两个控件的中间就添加了空白#includewidget.h#includeui_widget.h#includeQHBoxLayout#includeQPushButtonWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QHBoxLayout*layoutnewQHBoxLayout();this-setLayout(layout);QPushButton*button1newQPushButton(按钮1);QPushButton*button2newQPushButton(按钮2);QSpacerItem*spacernewQSpacerItem(400,20);layout-addSpacerItem(spacer);layout-addWidget(button1);layout-addWidget(button2);}Widget::~Widget(){deleteui;}那么如果我想要空白在两个控件的开头呢所以此时向水平布局管理器的添加控件的顺序就应该是先添加空白再添加第一个控件再添加第二个控件运行结果如下所以此时空白就在两个控件的开头了#includewidget.h#includeui_widget.h#includeQHBoxLayout#includeQPushButtonWidget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui-setupUi(this);QHBoxLayout*layoutnewQHBoxLayout();this-setLayout(layout);QPushButton*button1newQPushButton(按钮1);QPushButton*button2newQPushButton(按钮2);QSpacerItem*spacernewQSpacerItem(400,20);layout-addWidget(button1);layout-addWidget(button2);layout-addSpacerItem(spacer);}Widget::~Widget(){deleteui;}那么如果我想要空白在两个控件的结尾呢所以此时向水平布局管理器的添加控件的顺序就应该是先添加第一个控件再添加第二个控件最后添加空白运行结果如下所以此时空白就在两个控件的结尾了同样的对于上面讲解的QFormLayout创建表单的例子其中对于单行输入框和提交按钮太长那么我们可以使用QGridLayout创建一个三行三列的表单在单行输入框和提交按钮后面的第三列统一添加一个空白用于占位将单行输入框和提交按钮占用的空间变小这样单行输入框和按钮就美观不少那么我们进入ui文件我们从Spacers中可以找到Horizontal Spacer水平空白还有Vertical Spacer垂直空白那么这两个其实都是同一种空白都是QSpacerItem空白控件转变而来的那么在Qt Designer中我们也可以通过图形化的方式创建空白然后添加到布局管理器的控件之间使用方式很简单那么这里小编就不再演示了三、控件小结那么我们总的来看到目前我们对于Qt中如上的大部分的控件我们已经学习过相关的属性和使用了此时我们已经可以通过常用控件的组合去实现出一个相对复杂的界面了并且上述的每一个控件都是可扩展的那么如何理解这里小编讲解的可扩展呢1其实每一个控件都是对应Qt中内置的一个类那么我们可以基于这里Qt内置的类作为基类然后我们定义派生类去进行继承这个基类继承出自定义的派生类2那么在这个派生类中我们可以继续扩展添加很多的属性和方法所谓的属性本质上也就是成员变量所谓的方法也就是成员函数同样的对于基类的一些成员函数我们在派生类中也可以根据实际场景进行重写实现出符合我们需求的成员函数3并且我们也可以自定义一个派生类继承自QWidget窗口此时派生类就是一个窗口了那么我们在派生类的实现中可以组合很多其它的控件进而形成一些复杂的窗口那么此时在实际的场景中如果我们需要使用到这些复杂的窗口那么就可以直接将对应我们自定义的派生类直接引入进来所以此时在实际的场景中就直接引入了复杂的窗口了总结以上就是今天的博客内容啦希望对读者朋友们有帮助水滴石穿坚持就是胜利读者朋友们可以点个关注点赞收藏加关注找到小编不迷路