嵌入式 QT 界面布局管理

这篇具有很好参考价值的文章主要介绍了嵌入式 QT 界面布局管理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1、实例程序功能

2、界面组件布局

2.1 界面组件的层次关系

2.2 布局管理

2.3 伙伴关系和Tab顺序

嵌入式 QT 界面布局管理 

1、实例程序功能

    创建一个 Widget Application 项目 samp2_2, 在创建窗体时选择基类 QDialog ,生成的类命名为 QWDialog ,并选择生成窗体。
    如 此 新建 的项 目 samp2_2 有一 个界 面文 件 qwdialog.ui , 一 个头 文件 qwdialog.h 和源 程序 文件 qwdialog.cpp。此外,还有项目文件 samp2_2.pro 和主程序文件 main.cpp
qwdialog.ui 界面文件设计时界面如图 1 所示。程序的主要功能是对中间一个文本框的文字字体样式和颜色进行设置。
嵌入式 QT 界面布局管理
实例程序 samp2_2 设计时界面

 文章来源地址https://www.toymoban.com/news/detail-439733.html

在界面设计时,对需要访问的组件修改其 objectName ,如各个按钮、需要读取输入的编辑框、需要显示结果 的标签等,以便在程序里区分。对于不需要程序访问的组件则无需修改其 objectName ,如用于界面上组件分组 的 GroupBox Frame 、布局等,让 UI 设计器自动命名即可。
嵌入式 QT 界面布局管理

嵌入式 QT 界面布局管理 对于界面组件的属性设置,需要注意以下几点。

1. objectName 是窗体上创建的组件的实例名称,界面上的每个组件需要有一个唯一的 objectName ,程序 里访问界面组件时都是通过其 objectName 进行访问,自动生成的槽函数名称里也有 objectName 。所以, 组件的 objectName 需要在设计程序之前设置好,设置好之后一般不要再改动。若设计程序之后再改动 objectName,涉及的代码需要相应的改动。
2. 窗体的 objectName 就是窗体的类名称,在 UI 设计器里不要修改窗体的 objectName ,窗体的实例名称 需要在使用窗体的代码里去定义。

 

2、界面组件布局

   Qt 的界面设计使用了布局(Layout)功能。所谓布局,就是界面上组件的排列方式,使用布局可以使组件有 规则地分布,并且随着窗体大小变化自动地调整大小和相对位置。布局管理是 GUI 设计的必备技巧,下面逐步 讲解如何实现图 1 所示的界面设计。

2.1 界面组件的层次关系

   为了将界面上的各个组件的分布设计得更加美观,经常使用一些容器类,如 QgoupBox QtabWidget QFrame 等。
例如,将 3 CheckBox 组件放置在一个 GroupBox 组件里,该 GroupBox 组件就是这 3 CheckBox 的容器,移动这个 GroupBox 就会同时移动其中的 3 CheckBox
嵌入式 QT 界面布局管理
3 显示的是设计图 1 界面的前期阶段。在窗体上放置了 2 GroupBox 组件,在 groupBox1 里放置 3 个 CheckBox 组件,在 groupBox2 里放置 3 RadioButton 组件。图 3 右侧 Object Inspector 里显示了界面上个组件之间的层次关系。

2.2 布局管理

Qt 为界面设计提供了丰富的布局管理功能,在 UI 设计器中,组件面板里有 Layouts Spacers 两个组件 面板,在窗体上方的工具栏里有布局管理的按钮
嵌入式 QT 界面布局管理

 

嵌入式 QT 界面布局管理

Layouts Spacers 两个组件面板里的布局组件的功能见表

嵌入式 QT 界面布局管理 

使用组件面板里的布局组件设计布局时,先拖放一个布局组件到窗体上,如在设计图 4 3 个按钮的布局 时,先放一个 Horizontal Layout 到窗体上,布局组件会以红色边框显示。再往布局组件里拖放 3 Push Button 和 2 Horizontal Spacer ,就可以得到图 1 3 个按钮的水平布局效果。
在设计窗体的上方有一个工具栏,用于调整设计器进入不同的状态,以及进行布局设计,工具栏上各按钮的功能见表
嵌入式 QT 界面布局管理

嵌入式 QT 界面布局管理 使用工具栏上的布局控制按钮时,只需在窗体上选中需要设计布局的组件,然后点击某个布局按钮即可。在窗体上选择组件时同时按住 Ctrl 键,可以实现组件多选,选择某个容器类组件,相当于选择了其内部的所有组件。

例如,在图 3 的界面中,选中 groupBox1 ,然后单击“ Lay Out Horizontally ”工具栏按钮,就可以对 groupBox1 内的 3 CheckBox 水平布局。
在图 4 的界面上,使 groupBox1 里的 3 CheckBox 水平布局, groupBox2 里的 3 RadioButton 水平 布局,下方 3 个按钮水平布局。在窗体上又放置了一个 PlainTextEdit 组件。现在,改变 groupBox1 groupBox2 或按钮的水平布局的大小,其内部组件都会自动改变大小。但是当改变窗体大小时,界面上的各件却并不会自 动改变大小。
随后还需为窗体指定一个总的布局。选中窗体(即不要选择任何组件),单击工具栏上的“ Lay Out Vertically ” 按钮,使 4 个组件垂直分布。这样布局后,当窗体大小改变时,各个组件都会自动改变大小。
UI 设计器里可视化设计布局时,要善于利用水平和垂直空格组件,善于设置组件的最大、最小宽度和高 度来实现某些需要的布局效果。

2.3 伙伴关系和Tab顺序

UI 设计工具栏上单击“ Edit Buddies ”按钮可以进入伙伴关系编辑状态,如设计一个窗体时,进入伙伴编辑状态之后的界面如图;
嵌入式 QT 界面布局管理
伙伴关系( Buddy )是指界面上一个 Label 和一个组件相关联,如图 7 中的伙伴关系编辑状态,单击一个 Label,按住鼠标左键,然后拖向一个组件,就建立了 Label 和组件之间的伙伴关系。
伙伴关系是为了在程序运行时,在窗体上用快捷键快速将输入焦点切换到某个组件上。例如,在图 7 的界 面上,设定“姓名”标签的 Text 属性为“姓名 (&N) ”,其中符号“ & ”用来指定快捷字符,界面上并不显“ & ”, 这里指定快捷字母为 N 。那么程序运行时,用户按下 Alt+N ,输入焦点就会快速切换到“姓名”关联的输入框内。
嵌入式 QT 界面布局管理
UI 设计器工具栏上单击“ Edit Tab Order ”按钮进入 Tab 顺序编辑状态(如图 8 所示)。 Tab 顺序是指在 程序运行时,按下键盘上的 Tab 键时输入焦点的移动顺序。一个好的用户界面,在按 Tab 键时,焦点应该以合理的顺序在界面上移动,而不是随意地移动。
进入 Tab 顺序编辑状态后,在界面上会显示具有 Tab 顺序组件的编号,依次按希望的顺序单击组件,就可以重排 Tab 顺序了。没有输入焦点的组件是没有 Tab 顺序的,如 Label 组件。

 

 

 

到了这里,关于嵌入式 QT 界面布局管理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 嵌入式QT- QT使用MQTT

    目录 一、MQTT介绍 二、MQTT概念   2.1 订阅(Subscribtion)   2.2 会话(Session)   2.3 主题名(Topic Name)    2.4 主题筛选器(Topic Filter)    2.5 消息订阅 三、MQTT中的角色 3.1 客户端 3.2 服务器 四、X86平台安装mosquitto 4.1 下载 mosquitto 服务器 4.2 下载 mosquitto 客户端 4.3 mosquitto 命令

    2024年02月13日
    浏览(49)
  • 嵌入式Qt 第一个Qt项目

    打开Qt Creator 界面选择 New Project或者选择菜单栏 【文件】-【新建文件或项目】菜单项   弹出New Project对话框,选择Qt Widgets Application 选择【Choose】按钮,弹出如下对话框 设置项目名称和路径,按照向导进行下一步   选择编译套件 向导会默认添加一个继承自QMainWindow的类,可

    2024年02月20日
    浏览(48)
  • 【嵌入式——QT】容器类

    Qt提供了基于模板的容器类,这些容器类可以用于存储指定类型的数据项,Qt的容器类比标准模板库(STL)中的容器类更轻巧、安全和易于使用。它们还是线程安全的,它们作为只读容器时可被多个线程访问。 容器类是基于模板的类,如常用的容器类QList,T是一个具体的类型,可

    2024年02月22日
    浏览(49)
  • 嵌入式Qt Qt中的信号处理

    Qt消息模型: - Qt封装了具体操作系统的消息机制 - Qt遵循经典的GUI消息驱动事件模型 Qt中定义了与系统消息相关的概念;   Qt中的消息处理机制: Qt的核心 QObject::cinnect函数: Qt中的“新”: 实验1 初探信号与槽   运行结果: - 只有QObject的子类才能自定义槽 - 定义槽的

    2024年02月22日
    浏览(53)
  • 嵌入式图形库开发绚丽界面(lvgl、emwin、awtk)

            早些年的单片机开发中,很多都是使用文字菜单界面,这种界面让人感觉非常的朴实无华,内容言简意赅,如果使用图形库进行开发,你的产品一下子就让别人觉得有点高级,更容易去接收它。对于现在来说,很多的嵌入式图形库都可以做出绚丽的界面,占用RAM小,

    2024年01月25日
    浏览(51)
  • 嵌入式:QT Day1

    源码: widge.h  widge.cpp  main.cpp

    2024年02月15日
    浏览(47)
  • 【嵌入式——QT】QStyledItemDelegate用法详解

    QStyledItemDelegate是所有Qt item视图的默认委托,在创建它们时就会被安装在它们上面。 QStyledItemDelegate类是模型/视图类之一,是Qt模型/视图框架的一部分。委托允许项目的显示和编辑独立于模型和视图进行开发。 模型中数据项的数据被赋值为ItemDataRole;每个物品可以为每个角色存

    2024年01月23日
    浏览(49)
  • 嵌入式:QT Day2

    源码: widget.h second.h widget.cpp second.cpp main.cpp    

    2024年02月15日
    浏览(44)
  • 嵌入式:QT Day4

    源码: widget.h widget.cpp main.cpp

    2024年02月14日
    浏览(40)
  • 在嵌入式Linux设备上使用Flutter开发图形界面(试水)

    链接: https://www.bilibili.com/video/BV1qE411N7aC/?spm_id_from=333.880.my_history.page.clickvd_source=0c443477abedebf2fdf7abecef55405d 我是跟着这个视频安装 Docker Desktop for Windows + 启用k8s k8s网址 https://github.com/AliyunContainerService/k8s-for-docker-desktop 主要步骤参照 https://www.toradex.com/zh-cn/blog/zai-qian-ru-shi-linux-sh

    2024年02月21日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包