当前位置: 首页 > news >正文

Qt Designer UI设计布局小结

目录

      • 前言
      • 1 居中布局
      • 2 左右布局
      • 3 上下布局
      • 4 复杂页面布局
      • 总结

前言

本文总结了在开发Qt应用程序时使用 Designer 进行UI布局的一些心得体会。Qt Designer是Qt提供的一个可视化界面设计工具,旨在帮助开发人员快速创建和布局用户界面。它提供了丰富的布局管理器和控件,并支持直观的拖拽和放置操作,使得UI设计变得简单而高效。下面将按照几个不同的布局场景来说明。

1 居中布局

居中布局的需求在开发中还是比较常见的,比如弹窗提示页面、登录页面、动画加载页面等。下面以一个简单的登录页面为例,介绍如何设置居中布局,登录页面如下图所示:
在这里插入图片描述
要实现上图中的布局效果,首先在Designer中将组成页面必须的组件拖动到工作区,按照上图的位置放置好,然后再拖拽两个水平方向的spacer和两个垂直方向的spacer到工作区中,按照下图所示的位置放好
在这里插入图片描述

然后选中整个表单点击工具栏中的栅格布局按钮进行布局,即可实现将登录页面所有元素居中的效果,当鼠标拖动改变窗口大小之后组件任然居中。
在这里插入图片描述

2 左右布局

以下图的页面布局为例说一下如何对左右结构的页面进行布局。下图左边是一个树形控件,右边是一个分页组件,当用户点击树形控件的节点时右侧的页面会根据选择的节点来更新页面显示数据。
在这里插入图片描述
接下来在Designer中实现上述页面的布局,拖找一个QTreeWidget控件和一个QTabWidget控件到工作区,然后在Designer页面最右侧的对象表中选择根节点,点击栅格布局。这时会发现QTreeWidget控件、QTabWidget控件在页面中是左右均分的效果。假设将页面水平分为3份,QTreeWidget占1/3,QTabWidget占2/3,该如何设置这个参数呢?选中对象树的根节点,将属性面板滑动到底部,可以看到Layout部分的属性,其中layoutColumnStretch属性就是负责页面水平尺寸分配的,把这个值设置为1,2即可实现页面水平方向1:2的结构划分。当然了,知道这个特性之后,可根据实际设计需要将其设置成任何可能的值。如下图所示。
在这里插入图片描述
左右结构的页面还可以直接使用水平布局(Horizotal Layout )来实现,组件水平方向的占比是设置layoutStretch属性实现。除此之外还可以把一部分页面的宽度设置为固定值,其他部分可以根据窗口宽度缩放。

3 上下布局

介绍完左右结构的页面布局之后,再来介绍上下结构的页面布局就比较容易了。在左右结构的页面布局中layoutColumnStretch属性负责页面水平尺寸分配的,而在上下结构的页面布局中layoutRowStretch属性负责垂直分配控件所占尺寸。下面是一个简单的示例
在这里插入图片描述

在上图所示的页面中,将layoutRowStretch设置为 【0,0,1,0】,即当页面高度变化时除了“基本信息”输入框部分的高度会随页面改变外,其他部分的高度保持不变。
当然,这里也可以使用垂直布局 (Vertical Layout )来实现,组件垂直方向的占比也是设置layoutStretch属性实现的。除此之外还可以把一部分页面的高度设置为固定值,让其他部分可以根据窗口高度缩放。

4 复杂页面布局

在复杂的用户界面中,通常需要嵌套多个布局管理器来实现更复杂的布局。可以将一个布局管理器放置在另一个布局管理器中,以实现嵌套布局。先根据经验将页面划分为多个部分,然后对每个部分分别进行居中布局、左右布局、上下布局。最终通过调节水平、垂直尺寸分配参数使页面满足设计要求。这里就不给具体示例了。

总结

Qt Designer提供了强大而直观的界面设计工具,使得UI布局变得简单而高效。通过合理使用布局管理器、调整布局属性和嵌套布局,可以创建出具有良好外观和灵活布局的用户界面。本文以居中布局、左右布局、上下布局、复杂页面布局为核心总结了在使用Qt Designer设计程序界面时的一些知识,熟练掌握这些技巧可以快速搭建满足用户需求的UI。以上就是本文的所有内容了,有任何疑问欢迎留言讨论。

相关文章:

Qt Designer UI设计布局小结

目录 前言1 居中布局2 左右布局3 上下布局4 复杂页面布局总结 前言 本文总结了在开发Qt应用程序时使用 Designer 进行UI布局的一些心得体会。Qt Designer是Qt提供的一个可视化界面设计工具,旨在帮助开发人员快速创建和布局用户界面。它提供了丰富的布局管理器和控件…...

linux设备树节点添加新的复位属性之后设备驱动加载异常问题分析

linux设备树节点添加新的复位属性之后设备驱动加载异常问题分析 1 linux原始设备驱动信息1.1 设备树节点信息1.2 linux设备驱动1.3 makefile1.4 Kconfig1.5 对应的defconfig文件 2 修改之后的linux设备驱动2.1 修改之后的设备树节点信息2.2 原始test_fw.c出现的问题以及原因分析…...

连nil切片和空切片一不一样都不清楚?那BAT面试官只好让你回去等通知了。

连nil切片和空切片一不一样都不清楚?那BAT面试官只好让你回去等通知了。 问题 package mainimport ("fmt""reflect""unsafe" )func main() {var s1 []ints2 : make([]int,0)s4 : make([]int,0)fmt.Printf("s1 pointer:%v, s2 p…...

前端构建工具 webpack 笔记

1、了解 webpack 1、定义:本质上,webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具,当 webpack 处理应用它会在内部从一个或多个入口点构建一个依赖图(dependency graph),然后将你项目中所程序时,需的…...

.Net MVC 使用Areas后存在相同Controller时报错的解决办法; 从上下文获取请求的Area名及Controller名

先来说个额外的问题:如何在请求上下文(比如过滤器的中)获取请求对应的Area和Controller 名字?(假设请求上下文对象为 filterContext ): 1. 获取Area名: (string)filterContext.RouteData.DataTo…...

docker-compose部署etcd集群

1. docker-compose.yml cat > docker-compose.yml << EOF version: "3.0"networks:etcd-net: # 网络driver: bridge # 桥接模式volumes:etcd1_data: # 挂载到本地的数据卷名driver: localetcd2_data:driver: localetcd3_data:driver:…...

微信怎么定时发圈?

定时发圈的妙用 在合适的时间点发布新的产品、促销活动&#xff0c;不仅能够及时提醒用户品牌的存在&#xff0c;还可以引发用户的兴趣&#xff0c;增加品牌的曝光率。 选择最佳的发朋友圈时间段&#xff0c;以确保推广内容得到最大的曝光和关注&#xff0c;提高广告投放的效果…...

记录造数据测试接口

一、前言 在java开发中经常需要造数据进行测试接口&#xff0c;这里记录一下常用的通过造数据测试接口的方法。 二、一般的接口传参方式 1、接口的方式最好是使用JSON或者map的方式&#xff0c;这样的好处是传参可以灵活伸缩&#xff0c;返回的结果也最好是JSON或者map的方式…...

数据结构基础7:二叉树【链式结构】实现和递归思想。

二叉树的链式结构实现 一.二叉树链式结构的实现&#xff1a;1.前置说明&#xff1a;1.创建二叉树&#xff1a;2.二叉树的结构&#xff1a; 2.二叉树的遍历&#xff1a;1.二叉树的前中后序遍历&#xff1a;2.内容拓展&#xff1a; 二.二叉树链式(题目)题目一&#xff1a;计算节点…...

[.NET 6] IHostedService 的呼叫等等我的爱——等待Web应用准备就绪

📢欢迎点赞 :👍 收藏 ⭐留言 📝 如有错误敬请指正,赐人玫瑰,手留余香!📢本文作者:由webmote 原创📢作者格言:新的征程,我们面对的不是技术而是人心,人心不可测,海水不可量,唯有技术,才是深沉黑夜中的一座闪烁的灯塔 !序言 在这篇文章中,我将介绍如何等…...

基于jeecg-boot的flowable流程自定义业务退回撤回或驳回到发起人后的再次流程提交

更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; https://gitee.com/nbacheng/nbcio-boot 前端代码&#xff1a;https://gitee.com/nbacheng/nbcio-vue.git 在线演示&#xff08;包括H5&#xff09; &#xff1a; http://122.227.135.243:9888 主要…...

python如何学习

功能如此强大、高效的Python&#xff0c;却非常的简单好学&#xff0c;这让学它的同学爱不释手&#xff0c;也让越来越多的互联网企业开始用Python来做主要的开发语言&#xff0c;比如谷歌、Facebook&#xff08;现Meta&#xff09;、豆瓣、知乎等知名互联网公司都在使用Python…...

Centos7更新php7.2版本升级

之前搭建的LNMP环境php使用yum安装的版本为7.2&#xff0c;现有项目wordpress安装wp插件需要php7.4版本的支持&#xff0c;需要在原来的环境更新php版本。 一、卸载php7.2 yum remove php*原先的安装方式是yum安装直接yum remove就可以卸载否则需要rpm命令查询&#xff0c;按…...

操作系统学习笔记---计算机系统概述

目录 概念 功能和目标 特征 并发 共享&#xff08;资源共享&#xff09; 虚拟 异步 发展与分类 手工操作阶段&#xff08;无OS&#xff09; 批处理阶段 单道批处理系统 多道批处理系统 分时操作系统 实时操作系统 网络操作系统 分布式计算机系统 个人计算机操…...

uniapp H5 navigateBack无法返回上一层级

项目场景&#xff1a; 提交表单后需要返回上一级 原因分析&#xff1a; H5在PC端打开&#xff0c;当前页面重新加载的情况下&#xff0c;出现navigateBack不能返回&#xff0c;由于H5端页面刷新后返回页面栈会消失 //提交 const handleSubmit async () > {form.value?.a…...

Android性能优化之应用瘦身(APK瘦身)

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览2.1 apk组成 三、优化方向3.1 源代码3.1.1 代码混…...

C语言数组和指针笔试题(二)(一定要看)

目录 字符数组二例题1例题2例题3例题4例题5例题6例题7总结 字符数组三例题1例题2例题3例题4例题5例题6例题7 字符数组二 char arr[] {a,b,c,d,e,f} 1:printf("%d\n", strlen(arr)); 2:printf("%d\n", strlen(arr0)); 3:printf("%d\n", strlen(…...

uniapp——实现在线选座功能——技能提升

首先声明一点&#xff1a;下面的内容是从一个uniapp的程序中摘录的&#xff0c;并非本人所写&#xff0c;先做记录&#xff0c;以免后续遇到相似需求抓耳挠腮。 这里写目录标题 效果图代码——html部分cu-custom组件anil-seat组件 代码——jscss部分 效果图 代码——html部分 …...

领域驱动设计:微服务的各种边界

文章目录 演进式架构微服务还是小单体&#xff1f;微服务边界的作用 在用 DDD 进行微服务设计时&#xff0c;我们可以通过事件风暴来确定领域模型边界&#xff0c;划定微服务边界&#xff0c;定义业务和系统运行边界&#xff0c;从而保证微服务的单一职责和随需而变的架构演进能…...

MySQL之数据类型

目录 一、MySQL数据类型分类 二、数值类型 1、整数类型 2、bit类型 3、小数类型 三、字符串类型 1、char 2、varchar 3、char和varchar比较 四、日期和时间类型 五、enum和set 一、MySQL数据类型分类 MySQL 数据类型可以大致分为以下三类&#xff1a; 数值类型&#xff1a;用于…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...