Pyside6:Spacer的使用,布局中控件顶格添加

news2024/12/24 21:05:42

在普通的布局,如水平或纵向布局中,我们的控件都会保持中间状态,如下:

但有许多情况下 ,我们需要将控件布局为如下界面:

在前端开发时,我们很容易通过flex来进行布局,修正它的居中或者从头或者从尾,但在QT中并不是通过样式表完成,而是使用一种Spacer的控件完成,它的样子如同弹簧一般:

一、QT中的操作

非常简单的操作,仅需要在布局中将Spacer拉入即可完成从上往下或者从下往上的布局:

从左向右或者从右向左也是类似操作:

二、代码中动态添加控件 

如果希望在代码中动态为布局中添加控件也很简单,我们使用如下的布局,然后按一下添加按钮不停往下动态添加:

2.1确定layout

首先我们需要知道我们需要动态添加的layout在哪里,例如我们这个示例中的layout叫做verticalLayout:

2.2使用代码添加

# -*- coding: utf-8 -*-
from PySide6.QtWidgets import QWidget, QPushButton
from UI.TestPage_ui import Ui_Form


class TestPage(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.ui = Ui_Form()
        self.ui.setupUi(self)

        self.index = 0

    def click_add(self):
        btn = QPushButton()
        btn.setText(f'第{self.index}个按钮')
        self.ui.verticalLayout.addWidget(btn)

        self.index += 1

测试结果:

可以看到结果有悖理论想法,主要原因是我们的添加是在Spacer下方进行了添加,如果在Designer中显示就应该如下:

因此在动态添加时,不可直接使用 addWidget,而是使用insertWidget。

2.3最终代码

# -*- coding: utf-8 -*-
from PySide6.QtWidgets import QWidget, QPushButton
from UI.TestPage_ui import Ui_Form


class TestPage(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        self.ui = Ui_Form()
        self.ui.setupUi(self)

        self.btn_list = []

    def click_add(self):
        btn = QPushButton()
        btn.setText(f'第{len(self.btn_list)}个按钮')
        self.ui.verticalLayout.insertWidget(len(self.btn_list) + 1, btn)
        self.btn_list.append(btn)

测试如下:

三、总结 

在界面设计中控件需要顶格处理的情况非常多,因此熟练使用Spacer来处理相关问题很重要,这里不得不吐槽还是css中的flex好用多了。

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

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

相关文章

Github首页美化(updating)

Github首页美化 https://github.com/QInzhengk一、新建仓库二、美化Github首页主页访问量统计仓库状态统计常用语言占比统计社交链接 界面展示 https://github.com/QInzhengk 一、新建仓库 对Github首页进行美化,需要新建一个仓库名和自己 Github 用户名相同的仓库…

【数据库】三、数据库SQL语言命令(基础从入门到入土)

【全文两万多字,涵盖大部分常见情况,建议点赞收藏】 目录 文章目录 目录安装SQL语言1.使用2.DATABASE查看所有库新建数据库修改数据库删除数据库连接数据库 3.TABLE创建表查看库所有表删除表查看表信息重命名表修改表字段(列)表中…

Java---ideaIU-2023.1专业版使用以及安装方法

介绍 JetBrains 是一家专注于创建智能开发工具的前沿软件公司,包括:行业中领头的 Java IDE – IntelliJ IDEA,以及 Kotlin 编程语言。旗下常用的软件有IntelliJ IDEA、PhpStorm、RubyMine、Rider、WebStorm、goland、CLion、Pycharm,本安装包集成以上8款软件&#…

最大层内元素和

题目链接 最大层内元素和 题目描述 注意点 返回层内元素之和 最大 的那几层&#xff08;可能只有一层&#xff09;的层号&#xff0c;并返回其中 最小 的那个树中的节点数在 [1, 10000]范围内-10^5 < Node.val < 10^5 解答思路 广度优先遍历树&#xff0c;使用队列存…

windows系统CUDA的详细安装教程

CUDA系列 文章目录 CUDA系列前言一、CUDA简介二、安装配置视频教程三、CUDA的下载及安装3.1 环境检查3.2 CUDA 安装包下载3.3 安装CUDA&#xff08;略&#xff09;3.4 验证CUDA是否安装成功 四、cuDNN的下载及安装4.1 cuDNN下载4.2 cuDNN配置 五、配置环境变量六、下载并配置zl…

Day4 商品管理

Day4 商品管理 这里会总结构建项目过程中遇到的问题&#xff0c;以及一些个人思考&#xff01;&#xff01; 学习方法&#xff1a; 1 github源码 文档 官网 2 内容复现 &#xff0c;实际操作 项目源码同步更新到github 欢迎大家star~ 后期会更新并上传前端项目 编写品牌服务 …

LangChain入门指南:构建高可复用、可扩展的LLM应用程序 PDF书籍分享

今天又来给大家推荐一本大模型方面的书籍<Langchain入门指南>这本书专门为那些对自然语言处理技术感兴趣的读者提供了系统的LLM应用开发指南。全书分为11章&#xff0c;从LLM基础知识开始&#xff0c;通过LangChain这个开源框架为读者解读整个LLM应用开发流程。 下载当前…

轻松记录收支明细,详细记录每一笔收支,通过借款日期快速查找借款信息

财务管理对于个人和企业来说都至关重要。一份清晰、详尽的收支明细记录&#xff0c;不仅能帮助我们了解资金流向&#xff0c;还能在需要时提供有力的证据。因此&#xff0c;高效记录收支明细并轻松掌握财务状况成为了每个人的必备技能 第一步进入晨曦记账本主页面&#xff0c;…

ros2_control【B站WMGIII教学学习记录】1

资源 https://www.bilibili.com/video/BV1ku411G7UR? 学习过程中存在bug&#xff0c;记录一下 1 Q:"package ‘joint_state_publisher_gui’ not found, searching: [/home A: sudo apt install ros-humble-joint-state-publisher2 https://fishros.org.cn/forum/to…

抢先看!LEADTOOLS V23 全新版发布,预览全新产品线布局!

LEADTOOLS (Lead Technology)由Moe Daher and Rich Little创建于1990年&#xff0c;其总部设在北卡罗来纳州夏洛特。LEAD的建立是为了使Daher先生在数码图象与压缩技术领域的发明面向市场。在过去超过30年的发展历程中&#xff0c;LEAD以其在全世界主要国家中占有的市场领导地位…

SpringCloud引入SpringBoot Admin

Spring Boot Admin可以监控和管理Spring Boot&#xff0c;能够将 Actuator 中的信息进行界面化的展示&#xff0c;也可以监控所有 Spring Boot 应用的健康状况&#xff0c;提供警报功能。 1. 创建SpringBoot工程 2. 引入相关依赖 <dependency><groupId>com.alib…

基于ontape的备份与恢复实验

通过本文的备份恢复实验&#xff0c;我们可以深入了解ontape的使用方法和原理&#xff0c;包括如何进行完整备份、增量备份以及如何利用备份文件进行数据恢复。 1. 配置onconfig参数 通过修改onconfig参数文件&#xff0c;或使用onmode -wf命令&#xff0c;设置备份默认使用的…

电商巨头亚马逊公布新算法!或将颠覆跨境选品风向…

亚马逊每一次算法的变动&#xff0c;都会牵扯到无数卖家的利益。电商巨头亚马逊发布了一则报告&#xff0c;正式公布了一个名为“COSMO”的新算法。该算法全称为“亚马逊大型电商常识知识生成与服务系统”&#xff0c;顾名思义&#xff0c;就是利用大量语言模型训练机器&#x…

DSP系统的设计过程与选型

DSP的设计步骤分几个阶段&#xff0c;应用系统的设计过程如图所示。 技术指标的确定 器件的选型原则 其他因素的考虑

谈谈mysql中的各个关键字

1.为什么学习mysql mysql是当今最主流且开放源码的关系型数据库&#xff0c;开发者为瑞典 MySQL AB 公司。目前 MySQL 被广泛地应用在 Internet 上的中小型网站中。由于其体积小、速度快、总体拥有成本低&#xff0c;尤其是开放源码这一特点&#xff0c;许多中小型网站为了降低…

第G8周:ACGAN任务

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制&#x1f680; 文章来源&#xff1a;K同学的学习圈子 参考论文 这周主要任务就是根据之前GAN&#xff0c;CGAN&#xff0c;SGAN网络架构搭建…

OpenStack云计算(十一)——OpenStack网络管理,验证OpenStack网络资源模型,验证来巩固和加深对OpenStack网络资源模型的理解

项目实训一 【实训题目】 验证OpenStack网络资源模型 【实训目的】 通过验证来巩固和加深对OpenStack网络资源模型的理解。 【实训准备】 &#xff08;1&#xff09;复习Neutron网络资源模型。 &#xff08;2&#xff09;重点理解网络、子网、端口和路由器的概念。 【实…

使用LLM-API开发应用-DataWhale笔记

调用API 先使用一个例子 from openai import OpenAI ​ client OpenAI(# This is the default and can be omittedapi_keyos.environ.get("OPENAI_API_KEY"), //这个在环境env中 ) ​ completion client.chat.completions.create(# 调用模型&#xff1a;ChatGPT-…

科研基础与工具(论文写作)

免责申明&#xff1a; 本文内容只是学习笔记&#xff0c;不代表个人观点&#xff0c;希望各位看官自行甄别 参考文献 科研基础与工具&#xff08;YouTube&#xff09; 学术写作句型 Academic Phrase bank 曼彻斯特大学维护的一个网站 写论文的时候&#xff0c;不不知道怎么…

vue快速入门(四十一)组件通信-依赖注入

注释很详细&#xff0c;直接上代码 上一篇 新增内容 祖先组件向下传值子代组件接受数据 源码 App.vue <template><div id"app"><sonComponent></sonComponent></div> </template> <script> import sonComponent from &qu…