Qt Designer,仿作一个ui界面的练习(一):界面的基本布局

news2024/9/8 23:53:54

初学不要太复杂,先做一个结构简单的,大致规划一下功能分区,绘制草图:

 最终的效果:

        

        界面主要由顶边栏、侧边栏、内容区构成。顶边栏左边是logo,右边是时钟显示。侧边栏最上边是切换按钮,用以动画切换功能按钮的缩略显示和全部显示。

一、创建QMainWindow,命名为demo.ui:

二、移除菜单栏和状态栏

三、 将自带的QWidget命名为baseWidget:

        这是所有的部件的基底界面。

四、 在baseWidget上放置一个QFrame,命名为appFrame,这个QFrame就是软件的显示主界面。

五、再放置三个QFrame,分别命名为leftFrame(左边栏)、topFrame(顶边栏)、mainContent(显示内容主区)contentBox(内容区,由左边栏和显示内容主区组成,是软件的操作内容显示区)。

六、逐一设计布局和部件结构,从顶边栏开始:

        1、在topFrame(顶边栏)放置三个QFrame,从左至右分别命名为:topLogo、topContent、topTimeShow。

        2、顶边栏的属性设置,将最大和最小高度全部设置为50:

 3、topLogo的属性:最大和最小宽高均设尺寸为30*30

        4、topContent的属性:最大和最小高度全部设置为50:

         5、topTimeShow的属性:最大和最小宽高尺寸全部设置为200*50:

        6、右键点击topFrame(顶边栏),布局--水平布局。并在属性中将边距全部设为0 。

        7、右键点击topLogo,布局对齐--左侧。

        8、同样的方法, 设置topTimeShow布局对齐--右侧。

七、leftFrame(左边栏)的布局:

        1、leftFrame(左边栏)放置三个QFrame,从上到下分别命名为:left_toggleBox、left_buttonsBox、left_bottomBox。

        2、leftFrame(左边栏)的属性设置,将最小宽度设置为50。

        3、left_buttonsBox的属性设置,将最小宽度设置为50。

        4、left_toggleBox、left_bottomBox的属性设置,最小宽度设置为50,最小和最大高度均设为50。

        5、右键点击leftFrame(左边栏),布局--垂直布局。并在属性中将边距全部设为0 。

        6、右键点击left_buttonsBox,布局对齐--顶部。注意,顶部的不是left_toggleBox,虽然它在最上边。将位于中间的left_buttonsBox设为顶部,它就不会自动居中,而是随着尺寸的增长向下延伸。

        7、右键点击left_bottomBox,布局对齐--底部。

八、contentBox(内容区)的布局

        1、将leftFrame(左边栏)和mainContent(显示内容主区)拖入contentBox(内容区)。

        2、右键点击contentBox(内容区),布局--水平布局。并在属性中将边距全部设为0 。

        3、 右键点击leftFrame,布局对齐--左侧。

九、appFrame(显示主界面)的布局

        1、将topFrame和contentBox拖入appFrame(显示主界面):

         2、右键点击appFrame(显示主界面),布局--垂直布局。并在属性中stretch设为0,其余保持默认 。

十、整体的布局:

        右键点击MainWindow,布局--垂直布局。

        

         至此,完成了布局的基本框架设计,软件的显示主界面(appFrame)已经自动布满了QMainWindow,而且,当拖动改变QMainWindow的尺寸时,appFrame,也就是软件的显示主界面也随之改变。这就是使用布局的好处,它会自动调整相对的尺寸,使软件界面能够适应不同的屏幕分辨率。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1957993.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Notcoin 即将空投:你需要知道什么

Notcoin 于 2024 年 1 月推出,是 Telegram 上的一款边玩边赚游戏,用户可以通过点击硬币图标获得 Notcoin 代币 (NOT) 形式的奖励。NOT 建立在开放网络区块链(称为“TON 区块链”)上,由 Open Builders 创始人 Sasha Plo…

鸿蒙配置Version版本号,并获取其值

app.json5中配置版本号: 获取版本号: bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION).then((bundleInfo) > {let versionName bundleInfo.versionName; //应用版本号}).catch((error: BusinessE…

基于web的跨校区通勤车班次规划系统/校车管理系统

获取源码联系方式请查看文章结尾🍅 摘 要 随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而…

STM32项目分享:智能台灯(机智云)系统

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 PCB图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片: 哔哩哔哩视频链接: https://www.bilibili.com/video/BV1My411q7fE…

常见的CSS属性(一)——字体、文本、边框、内边距、外边距、背景、行高、圆角、透明度、颜色值

一、字体 二、文本 三、边框 四、外边距 五、内边距 六、背景 七、行高 八、圆角 九、透明度 九、颜色值 元素的继承性是指给父元素设置了某些属性,子元素或后代元素也会有作用。 一、字体 “font-*”是字体相关的属性,具有继承性。代码如下&a…

长上下文语言模型与RAPTOR 方法

在科技领域的前沿,长上下文语言模型(Long Context LLMs)和新兴检索方法如RAPTOR 正在引发广泛关注。本文将围绕这些技术展开讨论,并探讨它们在实际应用中的创新性和科技性。 长上下文语言模型的崛起 近几周来,随着新型…

基于 SSM 的汽车租赁系统

基于 SSM 的电器网上订购系统 开发语言:Java 数据库:MySQL 技术:Spring、JSP、MyBatis 工具:MyEclipse/IDEA、Tomcat 引言 汽车租赁是在约定时间内,租赁经营人将租赁汽车(包括载货汽车和载客汽车&#x…

前端在浏览器总报错,且获取请求头中token的值为null

前端请求总是失败说受跨域请求影响,但前后端配置已经没有问题了,如下: package com.example.shop_manage_sys.config;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Conf…

paddle ocr 文字识别模型训练 svtr

训练模型方法参考:https://github.com/PaddlePaddle/PaddleOCR/blob/main/doc/doc_ch/recognition.md 实践:https://aistudio.baidu.com/projectdetail/4482681 SVTR 算法原理 SVTR: Scene Text Recognition with a Single Visual Model Yongkun Du a…

Linux网络-ss命令

作者介绍:简历上没有一个精通的运维工程师。希望大家多多关注我,我尽量把自己会的都分享给大家,下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 Linux服务器作为一个常用的网络服务器,主要的作用就是向客户端提供网络…

数据结构(邓俊辉)学习笔记】高级搜索树03——红黑树

文章目录 1. 动机1.1 观察体验1.2 持久性1.3 关联性1.4 O(1)重构 2. 结构2.1 定义规则2.2 实例验证2.3 提升交换2.4 末端节点2.5 红黑树,即是B树2.6 平衡性2.7 接口定义 3. 插入3.1 以曲为直3.2 双红缺陷3.3 算法框架3.4 RR-13.5 RR-23.6 归纳…

将nvim的配置 上传gitee

首先是创建仓库 接着进入这个界面 然后是上传代码, 结果: 可以看到已经是可以了。 然后是 拉取代码进行测试。 第一次 拉取 使用 git clone .(家里) 做一点修改,然后上传。(公司) 然后在git pu…

Kotlin 的优势:现代编程语言的卓越选择

文章目录 简洁与优雅的语法空安全特性函数式编程,支持高阶函数、lambdaKotlin 内联函数与 Java 的互操作性强大的类型推断协程支持lazy 委托object 单例模式区间表达式现代的开发工具支持 本文首发地址 https://h89.cn/archives/301.html 最新更新地址 https://gite…

2024-07-27 Unity Excel —— 使用 EPPlus 插件读取 Excel 文件

文章目录 1 前言2 项目地址3 使用方法3.1 写入 Excel3.2 读取 Excel3.3 读写 csv 文件 4 ExcelSheet 代码 1 前言 ​ 前几日,一直被如何在 Unity 中读取 Excel 的问题给困扰,网上搜索相关教程相对古老(4、5 年以前了)。之前想用 …

探索 Electron:如何进行网址收藏并无缝收录网页图片内容?

Electron是一个开源的桌面应用程序开发框架,它允许开发者使用Web技术(如 HTML、CSS 和 JavaScript)构建跨平台的桌面应用程序,它的出现极大地简化了桌面应用程序的开发流程,让更多的开发者能够利用已有的 Web 开发技能…

嵌入式人工智能(28-基于树莓派4B的语音播报模块-SYN6288)

1、语音播报模块 语音播报在一些嵌入式场景中很常见,广泛应用于游戏篮球机音效语音播报,跑步机语音导航,按摩椅语音操作指引,设备故障提示,设备操作引导语音,车载安全语音警示,公共场所语音提示…

系统移植(七)u-boot移植 ④ trusted版本

文章目录 一、U-boot源码适配(一)执行make stm32mp15_trusted_defconfig命令进行配置,生成.config文件(二)执行make menuconfig命令,对u-boot源码进行重新配置1. 对u-boot源码进行配置,移除pmic…

Executable Code Actions Elicit Better LLM Agents

Executable Code Actions Elicit Better LLM Agents Github: https://github.com/xingyaoww/code-act 一、动机 大语言模型展现出很强的推理能力。但是现如今大模型作为Agent的时候,在执行Action时依然还是通过text-based(文本模态)后者JSO…

Java Web——第一天

Web开发课程安排 Web标准 Web标准也称为网页标准,由一系列的标准组成,大部分由W3C( World Wide Web Consortium,万维网联盟)负责制定 三个组成部分: HTML:负责网页的结构 (页面素和内容) CSS:负责网页的表现 (页面元素的外观、位置等页面…

Ubuntu 20.04.6 安装 Elasticsearch

1.准备 -- 系统更新 sudo apt update sudo apt upgrade -- 安装vim 文本编辑器 sudo apt install vim-- jdk 版本确认 java -versionjdk 安装可以参照:https://blog.csdn.net/CsethCRM/article/details/140768670 2.官方下载Elasticsearch 官方地址:h…