【QT学习二】Qt Design中使用Qt的基本布局

这篇具有很好参考价值的文章主要介绍了【QT学习二】Qt Design中使用Qt的基本布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

概述

Qt Design中使用Qt的基本布局

控件在哪?

怎么使用?

直接拖拽布局控件

使用工具栏

Layout的属性


概述

在我们使用Qt做界面设计时,为了界面的整洁美观,往往需要对界面中的所有控件做一个有序的排列,以及设置各个控件之间的间距等等,为此Qt为界面设计提供了基本布局功能,使用基本布局可以使组件有规则地分布。

基本布局控件(QLayouts)在UI界面中不会显示只是控制其中的其它控件的相对位置。

如果Qt UI界面中的控件使用了布局,这些控件就会随着窗体的大小变化自动地调整大小和相应的位置

布局是可以嵌套使用的。

你还可以使用Qt Design图形化地设计布局界面。 也可以使用代码设计界面布局。本文从使用Qt Design方面简单介绍下Qt的基本布局

Qt Design中使用Qt的基本布局

控件在哪?

【QT学习二】Qt Design中使用Qt的基本布局

左边是布局管理组(Layouts),右上方是快捷布局,两者的使用方式略有不同。

布局管理组(Layouts)中各个控件分别是:

Vertical Layout:垂直布局或纵向布局;

Horizontal Layout:水平布局或横向布局;

Grid Layout:网格布局或栅格布局,将页面上的控件按照网格的样式分布;

Form Layout:表单布局,控件以两列的形式布局在表单中,其中左列包含标签,右列包含输入控件。

相应的快捷方式在上方工具栏中,从图标样式也可以看得出来对应的布局方式。

怎么使用?

直接拖拽布局控件

使用方式是先把布局控件拖入界面中,之后再把其它需要的控件拖入到布局控件中,则这些控件就会自动调整为相应的布局。

【实例1】

将一个Horizontal Layout拖入界面,会显示一个红色的框。

【QT学习二】Qt Design中使用Qt的基本布局

再将需要布局的控件拖入到红色的框中,也就是Horizontal Layout控件中。我把两个PushButton拖入红框中,如下图,两个PushButton自动横向排列。

【QT学习二】Qt Design中使用Qt的基本布局

 

使用工具栏

        其实就是先把界面需要显示的控件都拖拽上去,然后再去进行布局,方法是选中需要布局的多个控件,然后点击工具栏中的相应的布局菜单。

       布局的原则是由内到外,由小到大

【实例2】

例如我要做一个类似某EDA软件的工程设置界面,首先,把界面要显示的控件都拖拽到界面上,如下图:

【QT学习二】Qt Design中使用Qt的基本布局

 

选中整个页面,选择Grid Layout,如下图,显示不是很美观。

【QT学习二】Qt Design中使用Qt的基本布局

 

点击上方的break layout  ,解除界面布局。

按照我们的原则,由小到大,由内到外,先对每一小组进行布局,如下图:

Project device后的text框和选择按钮是一块的,先给它俩进行Horizontal布局,同理,下面还有一小组。

【QT学习二】Qt Design中使用Qt的基本布局

然后再选择整个界面,点击菜单Form Layout进行布局,效果如下:

【QT学习二】Qt Design中使用Qt的基本布局

 

你会发现比之前好看了一些,但总觉得那个按钮有点大。

选中那个Layout,在Qt Design的右侧有个属性设置界面,可以调节,如下图

 【QT学习二】Qt Design中使用Qt的基本布局

 

layoutStretch属性,就可以调整布局中每个控件所占大小的比例。

Layout的属性

layoutName   :所使用的布局管理器的名称

layoutLeftMargin   :设置布局管理器到界面左边界的距离

layoutTopMargin  :设置布局管理器到界面上边界的距离

layoutRightMargin :设置布局管理器到界面右边界的距离

layoutBottomMargin    :设置布局管理器到界面下边界的距离

layoutSpacing       :设置布局管理器各个子部件间的间隔

layoutStretch  :设置布局因子,调整布局中每个控件所占大小的比例

layoutSizeConstraint     :设置大小约束条件文章来源地址https://www.toymoban.com/news/detail-481549.html

到了这里,关于【QT学习二】Qt Design中使用Qt的基本布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Qt使用代码放置控件并布局

            上一章中我们从头一步一步地新建项目并运行了窗口,本章就正式踏入Qt界面编程之路。在本章节,我们先用代码编写界面,进行简单的控件放置,然后用代码进行布局;之后使用Qt Designer进行控件放置和界面布局,这使得复杂界面的设计变得简单起来。      

    2024年02月07日
    浏览(32)
  • 『PyQt5-Qt Designer篇』| 06 Qt Designer中水平布局和垂直布局的使用

    拖动几个按钮: 选中这几个按钮, 右键-布局-水平布局 : 可以看到按钮间隔等宽水平排列:

    2024年02月10日
    浏览(37)
  • Qt中多ui使用及简单布局实现交互界面

    第一章 Qt中C++代码搭配UI文件实现交互界面 第二章 Qt中多ui使用及简单布局实现交互界面 文章目录 前言 一、新增两个新UI文件 二、使用这两个新增的UI及简单布局 三.添加简单联动逻辑 四.编译运行及动态效果展示 总结         前一段时间,写了一篇关于Qt中C++代码搭配

    2024年02月04日
    浏览(41)
  • QT中资源文件resourcefile的使用,使用API完成页面布局

    在Qt中引入资源文件好处在于他能提高应用程序的部署效率并且减少一些错误的发生。 在程序编译过程中, 添加到资源文件中的文件也会以二进制的形式被打包到可执行程序中,这样这些资源就永远和可执行程序捆绑到一起了,不会出现加载资源却找不到的问题。 资源文件

    2024年02月12日
    浏览(30)
  • 将Qt Design Studio中创建的UI文件导入Qt Creator中

    从Qt Design Studio中创建了UI文件,我这里是跟着官方文档示例做的一个ui文件Loginui1。 在Qt Creator中创建新的项目: 我这里将项目取名为Import_UI 创建好后的项目结构: 右键main.qml 选择Remove 这里确定,也可以勾选彻底删除,之后不会用到这个文件。 接着还要弹窗,我们选择 否

    2024年02月15日
    浏览(39)
  • 【QML-Qt Design Studio】

    Qt Design Studio是一个用于创建酷炫、优美UI的工具。 简单概括其功能就是让UI设计转换为qml,为工程师所用。 官方下载地址(建议) QT官方下载地址 断网安装,不需要的登录用户账户࿱

    2024年01月24日
    浏览(31)
  • Qt的基本语法及其使用(一)

    Qt的概念: Qt是通用的C++开发界面框架(C++图形用户界面 应用程序开发框架),既可以开发GUI程序也可以开发开发非GUI程序,Qt是面向对象的框架,使用特殊的代码生成扩展。 Qt的历史: 1991由QT公司研发,2008年被诺基亚收购,2012年被Digia收购。 Qt模块: Qt Core模块: 是QT类库的核心

    2024年02月05日
    浏览(26)
  • QT Creator上位机学习(一)基本类别及主体框架解析

    之前也学习制作过串口上位机和利用Qchart完成数据的曲线显示等等,但大多只是对网上的程序进行拼接,这次又需要做一个上位机,打算好好学习记录一下。 可以创建多种项目: 1.Qt Widgets Application:支持桌面平台的GUI应用程序,C++。 2.Qt Console Application:无GUI界面,控制台应

    2024年02月12日
    浏览(37)
  • Qt qDebug基本的使用方法详解

    DebugView下载   qDebug是Qt框架中用于输出调试信息的一个宏。它类似于C++标准库中的std::cout,用于在控制台中输出调试信息。qDebug的使用非常简单,可以用于输出各种类型的数据,例如字符串、整数、浮点数等。 qInfo、qWarning、qCritical等,用于输出不同级别的调试信息。   

    2024年04月22日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包