Qt6学习笔记六(界面布局)

简介: Qt6学习笔记六(界面布局)

一、界面布局

首先在ui界面,用label、Line Edit、PushButton设计成下图所示

image

1.水平对齐

放置一个widget,然后将用户名和用户名输入框拖到widget中

image

选中widget,点击上方的水平布局,即可将label和Line Edit对齐

image

同样的方式,将密码和密码输入框和水平对齐,将登录和退出也水平对齐

得到如下

image

2.垂直对齐

点击最外层的MainWindow

选择垂直对齐

image

这样有点丑

3.水平空格

可以使用Horizontal Spacer,添加空格,使得布局之间留有间隙。

image

如果想要中间的弹簧,长度固定,可以先选中弹簧,设置Fixed,然后设置宽长。

image

image

同样对,用户名和密码也这样布局

image

4.拆分布局

选中mainwindow

image

5.栅格布局

将4个控件放入widget中,这样就能以2行2列进行布局了,不再会出现一个Label Edit长,另一个短的现象了

image

选中widget点击栅格布局,可以发现非常整齐了。

image

6.其他调整

最后可以发现,登入\退出和输入用户名密码之间距离很大

image

选中,上半个widget,垂直策略选择fixed

image

这样子就会根据控件的大小,获得widget的高。

image

然后对登录、退出之间也进行同样的操作,垂直换成fixed

再在用户名和密码之间添加一个弹簧

image

再修改一下windowTitle,最后实现的效果如下图

image

最后要固定窗体的大小,不想让它拖拽,用代码是可以实现的。

在ui界面,可以设置最小宽高和最大宽高一样,就可以实现固定的效果。

image

7.密码框

这个样子,密码都是明文,是不行的

image

可以将密码Line Edit,echoMode修改成password

image

8.总结

image


相关文章
|
5月前
【qt】 QGridLayout布局管理器怎么用?
【qt】 QGridLayout布局管理器怎么用?
189 0
|
5月前
|
监控 C++ 容器
【qt】MDI多文档界面开发
【qt】MDI多文档界面开发
124 0
|
3月前
|
编译器
【项目开发】QT简单练习之QQ登录界面模仿
为了进一步加深对QT开发的理解,在学习完基础操作之后要进行一个简单的练习。
|
5月前
【Qt 学习笔记】Qt窗口 | 标准对话框 | 消息对话框QMessageBox
【Qt 学习笔记】Qt窗口 | 标准对话框 | 消息对话框QMessageBox
861 4
【Qt 学习笔记】Qt窗口 | 标准对话框 | 消息对话框QMessageBox
|
5月前
|
开发者
【Qt 学习笔记】Qt系统相关 | Qt事件 | 事件的介绍及基本概念
【Qt 学习笔记】Qt系统相关 | Qt事件 | 事件的介绍及基本概念
249 4
|
5月前
【Qt 学习笔记】Qt窗口 | 标准对话框 | 文件对话框QFileDialog
【Qt 学习笔记】Qt窗口 | 标准对话框 | 文件对话框QFileDialog
942 4
|
5月前
|
数据安全/隐私保护
【Qt 学习笔记】Qt窗口 | 对话框 | 模态与非模态对话框的创建
【Qt 学习笔记】Qt窗口 | 对话框 | 模态与非模态对话框的创建
476 4
|
5月前
【Qt 学习笔记】Qt窗口 | 标准对话框 | 输入对话框QInputDialog
【Qt 学习笔记】Qt窗口 | 标准对话框 | 输入对话框QInputDialog
350 3
|
5月前
|
数据可视化
【Qt 学习笔记】Qt窗口 | 标准对话框 | 字体对话框QFontDialog
【Qt 学习笔记】Qt窗口 | 标准对话框 | 字体对话框QFontDialog
117 3