QT实例1--使用UI文件创建登陆窗口

基础信息

• 平台：window 10

• QT版本
  ：5.14.2

• 时间:2024.08.25

• 本工程是QLayout专题,使用UI文件创建一个登陆窗体

• 本例程原始资料来源于B站，UP主“爱编程的大丙”的视频教程《QT开发编程-入门基础教程QT5–6.2窗口布局举例-制作一个登陆界面》

• 本笔记，用于实践上述例程，并进行笔记整理，提取最重要的干货信息。

创建工程

创建一个工程，工程名称=Login

使用默认的MainWindow工程即可

工程创建好以后，右键工程名称，添加一个“QT设计师界面类”，注意不要选错。

一般登陆窗口用对话框类即可。“QT设计师界面类”，选择使用不带按钮的即可。

新建的“QT设计师界面类”，名称=Login

控件布局

重点来临：研究QT的布局，要掌握一些最基本的知识，如水平布局，垂直布局，网络布局。在我看完了一本《QT5开发及实例》，并且手敲了一些代码，对QT有了一个基本的认识后，对一些知识点的理解和掌握，与脑海中想象的有偏差，这也是我想做几个练手的小例子来加深理解的原因。

用实战来纠正脑海中的偏差。

QT中的布局，就是这样一个例子。拖一拖、点一点、会把人搞蒙圈，这一点对入门的新手不太友好，还是要学习一下的。使用C++或C#在VS中开发，相比来说对新手要友好多了。

• 给登陆界面设计一个标题，插入一个QLabel，起名叫“密码”，再把这个QLabel放入一个Widget中。如下2图：

• 把QLable拖入到Widget中，未进行任何布局时，是下面的样子。

请注意：不要想当然的、惯性思维的去手动去调整位置，停下来，不要动！

请注意：不要想当然的、惯性思维的去手动去调整位置，停下来，不要动！

请注意：不要想当然的、惯性思维的去手动去调整位置，停下来，不要动！

• 观察此时，右侧对象列表的状态，在未进行任何布局的情况下，图标右下角有一个红色的禁止图标。如下图：
  
• 点击工具栏中的“水平布局”图标，QT会自动调整控件在Widget内水平布局，自动排列，无需手动操作。

• “水平”布局，如下图所示，注意观察右侧红色禁止图标消失了，更新变成了水平布局的图标。
  

登陆窗口中的其它控件，如用户名、密码、输入框QLineEdit、单选按钮QRadioButton、复选框QCheckBox、按钮QPushButton等，不再赘述，见下图。

特别注意：用户名及输入框，和密码及输入框，请采用“网格布局”。

这相当于2行2列的矩阵，想像一下excel表格，然后把这4个控件，放入到了这2行2列的位置中去。网格布局，会使用户名的输入框与密码输入框是对齐的状态。无论窗体如何拉伸，它们都是对齐的。

• 先中5个水平对齐，再点击工具栏的“垂直布局”，把5个水平布局的Widget容器再垂直布局，如下图所示。

这怎么这么难看？Q

T是如何处理左对齐、居中、右对齐的？

QT是如何处理控件间的间距的？

QT是如何处理窗体在拉伸时，控件的布局的？

重点来临：

“水平空格”和“垂直空格”来解决此问题。

好多网友也称“水平弹簧”、“垂直弹簧”

还有直接叫“弹簧”的、叫“刀哥”的。高手在民间啊~！

“弹簧”登场后，所见即所得，知道左对齐、居中、右对齐是怎么来的了吧~！一根弹簧往一侧挤，2根弹簧往中间挤，这下，不难理解了。

居中也不是问题了，Ctrl+R运行后，拉伸窗体看一看效果~！

弹簧可以设置sizeType，默认是Expanding扩展的，可以设置为Fixed固定的，然后再指定宽度，这就是设计控件间间距的方法。设置为FIxed后，窗体拉伸，控件间的间距保持不变。

扩展的，可以设置为Fixed固定的，然后再指定宽度，这就是设计控件间间距的方法。设置为FIxed后，窗体拉伸，控件间的间距保持不变。