使用布局管理器,来设计一个登陆界面

都是操作,没代码没理论。参照:Qt设计一登陆窗口布局

1. 新建空工程

双击.ui文件,进入界面设计区。

我们新建工程时候,使用的是QMainWindow类,会自动包含菜单栏、状态栏。在右上角对象浏览器中,我们可以选选择性的删除掉他们。

我们要设计的是一个登陆窗口,于是菜单栏、工具栏、状态栏都不需要。将其在UI设计器中全部删除掉。

现在运行只是一个空窗口,与Widget类没什么区别。

2. 登陆窗口布局

文字显示使用Label,输入框使用Line Edit,按键使用Push Button。

大概拖拽、编辑后是这个样子。

不过此时运行,控件的位置不是随着窗口变化的,而是固定位置的,还需很多完善。需要使用布局管理器。

3. 布局管理器

控件拖拽进来不是对齐的,我们先进行对齐的布局。

对齐有两种操作方式:

  • 1.使用垂直/水平布局 Vertical/Horizontal Layout,之后将控件拖入,再调节大小。不过这个不是很灵活。
  • 2. 使用 Widget,将控件拖入,选中 Widget,使用Vertical/Horizontal Layout。这样用起来更加灵活。

我们先将 使用Widge,将用户名和输入框拖入,进行水平对齐。再使用Widge,将密码和输入框拖入,进行水平对齐。

如何区分Widget是否有过布局??没有布局的Widget的图标不一样,有个红圈。

再使用Widget,将这三个子Widget全部放入,使用栅格布局Grid Layout。

不过这样搞又发现了问题,上下输入框大小不一致。

于是将控件全部分离出,再使用一个Widget,将控件全部放入,使用栅格对齐。

这回输入框是一致,可按键又不一样了。因为栅格布局会自动整理好几行几列,行列全部一致,所以会出现如上情况。

只好将按键单独布局。

将整体窗口使用垂直布局,将窗口大小像素缩小。

4. 使用弹簧进行位置调整

使用弹簧对各个控件进行一下中心调整。

(注意:没有布局的界面,弹簧是无效的。同理,已经布好弹簧的界面,如果想让弹簧失效,可以使用取消布局)

如果想让弹簧是固定距离,更改属性为 Fixed,输入宽度。

而现在这两个子Widget的上下距离都比较大,如果使用垂直弹簧的话,会给两个的中间搞出很大的空隙。

为了消除空袭,将两部分的Widget垂直高度固定,垂直策略改为Fixed。

之后再适当的在垂直方向加上一些弹簧。

嗯,有那味了。

5. 其他修改、隐藏密码

界面布局就大概完成了,之后再对属性进行一些修改。

窗口标题,windowTitle。

现在的窗口还是可以缩放的,我们想要固定。将最大最小范围限定为同一值。

再仔细观察窗口,发现弹簧和窗口/控件间是有间隙的。系统默认为9个像素间隙。

间隙距离可以选中 Widget,属性拖到最后的Layout进行修改。

另外现在输入密码,密码是显示在屏幕上的,想要普通登陆界面的登陆效果,也要更改 Line Edit 的属性。

将echoMode改为Password。

就是这样,输入密码时明文不可见。一个完整的登陆窗口就设计好了。

【Qt教程】2.2 - Qt5 布局管理器(水平、垂直、栅格布局)、弹簧、设计一个登陆界面相关推荐

  1. Android布局管理器-使用TableLayout表格布局管理器实现简单的用户登录页面

    场景 Android布局管理器-使用FrameLayout帧布局管理器显示层叠的正方形以及前景照片: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...

  2. java 布局管理器_有时在Java中,一个布局管理器是不够的

    java 布局管理器 在开发Java Swing应用程序时,最经常的是,我们需要在多个嵌套面板中使用多个布局管理器. 这通常不是问题,被认为是几乎所有人类已知语言的所有UI开发的常规做法. 但是,大多 ...

  3. java中布局管理器flowlayout_JAVA基础:FlowLayout布局管理器

    在前面的例子中,使用到了FlowLayout布局管理器.FlowLayout型布局管理器对容器中组件进行布局的方式是将组件逐个地安放在容器中的一行上.一行放满后就另起一个新行. FlowLayout有 ...

  4. Android布局管理器-使用FrameLayout帧布局管理器显示层叠的正方形以及前景照片

    场景 Android布局管理器-使用LinearLayout实现简单的登录窗口布局: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details ...

  5. Java布局管理器实现关掉,Java布局管理器使用方法探讨

    下载本文示例代码 很多初学者在用Java布局器自动布局画界面时,经常遇见不知道如何定义区域大小或按钮之间的距离等问题.我写过一篇<实现JAVA手动布局中各个组件能随窗口变化的方法>的文章, ...

  6. 布局管理器android,Android课程---布局管理器之相对布局(一)

    下面示例的是在父容器里如何设置按钮的位置,难度:***,重点是找到一个主按钮,设置它的id,然后根据它来设置其他按钮在父容器的位置. 代码示例: android:layout_width=" ...

  7. java 网格包布局管理器_java :网格包布局管理器GridBagConstraints的应用

    代码如下:···(略)publicclassApp12_13extendsJFrame{staticApp12_13frm=newApp12_13();staticJLabeljlab=newJLab ...

  8. QT每日一练day10:设计一个登陆界面

    目标 创建项目文件 下列代码编译运行: 继续添加代码: 在确认左边添加空白 设置英文显示为圆黑点显示 省略一些步骤描述 最终效果: work.pro widget.h widget.cpp main. ...

  9. Qt学习(九)—— 布局管理器

    目录 水平/垂直/网格布局 水平布局 垂直布局 网格布局 addWidget() addStretch() 没有布局的界面不仅不美观,窗口中的内容也难以对窗口的大小进行自适应,因此我们还需要学习Qt中 ...

最新文章

  1. mysql is复制表结构_MySQL复制表结构和内容到另一张表中的SQL语句
  2. 使用 CodeIgniter 框架快速开发 PHP 应用(二)
  3. 想知道数据表的用户或系统异动时间
  4. 基本Socket通信流程
  5. Linux iostat 命令
  6. [html] websocket可以携带cookie吗?为什么?如果可以,怎样做到呢?
  7. 特定领域因果事件图谱构建项目
  8. QT串口QSerialPort解决接收数据不完整问题
  9. 【转】Canny 算法
  10. uipath数据爬取(结构化数据)
  11. android sqlite SQLiteDatabase
  12. oracle入门教程+视频教程
  13. MATLAB 爬取配色css数据及渐变图
  14. 一个独到程序员的深刻见解(转)
  15. 中国菜刀使用与原理分析
  16. 【2021-01-05】JS逆向之B站模拟登入(含极验点选)
  17. 小米重新上锁[BL]
  18. woocommerce对接paypal如何进行沙盒测试?
  19. 外媒评中国最具创新力公司
  20. 大圣归来 三里屯优衣库试衣间是怎么刷爆朋友圈的

热门文章

  1. Python之Mac上搭建集成开发环境
  2. mngoDB 常用语法
  3. sql server 当月天数
  4. 【Java从0到架构师】Spring - AOP
  5. 【计算机组成原理】课本总览
  6. 一步一坑学android之禁用Appt2(andriod studio3.0)
  7. Web渗/透/攻/击实战(1)—成功渗/透台湾某净化设备公司官网
  8. 重启小狼毫输入法,rime输入法重启
  9. 做报表的朋友偷偷告诉我月薪5w的秘密:让报表动起来
  10. 常用ColorMatrixFilter收集