iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > Python >Python怎么使用Qt5实现水平导航栏
  • 876
分享到

Python怎么使用Qt5实现水平导航栏

2023-07-05 09:07:48 876人浏览 泡泡鱼

Python 官方文档:入门教程 => 点击学习

摘要

本篇内容主要讲解“python怎么使用Qt5实现水平导航栏”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Python怎么使用Qt5实现水平导航栏”吧!在 Qt5 中可以使用 QWidget 包含

本篇内容主要讲解“python怎么使用Qt5实现水平导航栏”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习Python怎么使用Qt5实现水平导航栏”吧!

在 Qt5 中可以使用 QWidget 包含两个水平布局,通过点击水平布局里的按钮,实现下标滑动与页面的切换。

Python怎么使用Qt5实现水平导航栏

可以按照以下步骤来实现上面图片中的功能:

导入必要的 Qt 包:

from PyQt5.QtCore import QPoint, QPropertyAnimationfrom PyQt5.QtWidgets import QVBoxLayout, QHBoxLayout, QPushButton, QLabel

创建 ui_init 函数,接收 self,和外部传入的列表:

def ui_init(self, datas):

创建一个 list 来保存水平布局里的按钮:

self.button_list = []

创建两个水平布局 QHBoxLayout,一个放置 QPushButton, 一个放置 QLabel,并设置水平布局的内容边距以及组件边距:

container = QHBoxLayout()container.setSpacing(0)container.setContentsMargins(10, 0, 10, 0)container2 = QHBoxLayout()container2.setContentsMargins(10, 0, 10, 0)

使用 for 循环来遍历传递进来的字符串列表,并且根据其长度创建 QPushButton,设置 QPushButton 的显示样式,最后将 QPushButton 添加进 QHBoxLayout,并且保存在 self.button_list 当中:

for number, data in enumerate(datas):    btn = QPushButton(data)    btn.setStyleSheet(        "QPushButton { border: none; "        "height: 25px; }"    )    container.addWidget(btn)    self.button_list.append(btn)

创建一个 QLabel 设置其大小和颜色,其中 Label 的宽度为测量 QHBoxLayout 的宽度 / QPushButton 的个数:

self.label = QLabel()self.label.setContentsMargins(0, 0, 0, 0)self.label.setFixedWidth(int(710 / len(self.button_list)))self.label.setFixedHeight(2)self.label.setStyleSheet("QLabel { background-color: rgb(10, 96, 255); }")

创建一个QPropertyAnimation对象,设置动画的持续时间为100毫秒,用于实现动画效果:

self.animation = QPropertyAnimation(self.label, b'pos')self.animation.setDuration(100)

将 QLabel 添加进水平布局中,并且在其右边设置一个伸缩量确保 QLabel 初始化时在第一个按钮下方:

container2.addWidget(self.label)# 设置伸缩量使label处于左边container2.addStretch(1)self.addLayout(container)self.addLayout(container2)

使用 for 循环遍历 self.button_list,让列表中的 QPushButton 连接槽函数:

for btn in self.button_list:    btn.clicked.connect(lambda state, b=btn: self.buttonClicked(b))

创建一个槽函数:

def buttonClicked(self, button):

在槽函数中,获取按钮和标签的当前位置:

pos = button.pos()current_pos = self.label.pos()

设置动画的起始值和结束值:

start_value = QPoint(current_pos.x(), current_pos.y())end_value = QPoint(pos.x(), pos.y() + button.height())self.animation.setStartValue(start_value)self.animation.setEndValue(end_value)

启用动画:

self.animation.start()

以下为完整代码示例:

from PyQt5.QtCore import QPoint, QPropertyAnimationfrom PyQt5.QtWidgets import QVBoxLayout, QHBoxLayout, QPushButton, QLabel, QApplicationclass TopTitle(QVBoxLayout):    def __init__(self, datas):        super().__init__()        self.ui_init(datas)    def ui_init(self, datas):        self.button_list = []        container = QHBoxLayout()        container.setSpacing(0)        container.setContentsMargins(10, 0, 10, 0)        container2 = QHBoxLayout()        container2.setContentsMargins(10, 0, 10, 0)        for number, data in enumerate(datas):            # 此时num是元素的序号,data为元素            # 水平布局包含多个垂直布局            btn = QPushButton(data)            btn.setStyleSheet(                "QPushButton { border: none; "                "height: 25px; }"            )            container.addWidget(btn)            self.button_list.append(btn)        self.label = QLabel()        self.label.setContentsMargins(0, 0, 0, 0)        self.label.setFixedWidth(int(710 / len(self.button_list))) # 710为手动测量QHBoxLayout的宽度        self.label.setFixedHeight(2)        self.label.setStyleSheet("QLabel { background-color: rgb(10, 96, 255); }")        # 创建一个QPropertyAnimation对象,用于实现动画效果        self.animation = QPropertyAnimation(self.label, b'pos')        self.animation.setDuration(100)  # 设置动画的持续时间为100毫秒        container2.addWidget(self.label)        # 设置伸缩量使label处于左边        container2.addStretch(1)        self.addLayout(container)        self.addLayout(container2)        for btn in self.button_list:            btn.clicked.connect(lambda state, b=btn: self.buttonClicked(b))            # 这里,我们为 lambda 表达式添加了额外的参数 state,以兼容 QPushButton.clicked 信号的多重重载。            # 同时,使用默认参数 b=btn 来确保 button 参数在 lambda 表达式中被正确地传递。    def buttonClicked(self, button):        # 获取按钮的位置        pos = button.pos()        # 获取标签的当前位置        current_pos = self.label.pos()        # 设置动画的起始值和结束值        start_value = QPoint(current_pos.x(), current_pos.y())        end_value = QPoint(pos.x(), pos.y() + button.height())        # 设置动画的起始值和结束值        self.animation.setStartValue(start_value)        self.animation.setEndValue(end_value)        # 启动动画        self.animation.start()if __name__ == '__main__':    app = QApplication([])        title = TopTitle(["7", "8", "9", "+", "7", "8", "9", "+"])        w = QWidget()    w.resize(710, 200)w.setLayout(title)    w.show()        app.exec_()

最后要实现页面切换的方法,就是在按键的槽函数中,设置 StackedLayout 的 index 就可以实现了,当然也可以在创建对象后,在其他 QWidget 中获取 TopTitle.button_list 中的 QPushButton,来自定义按钮的链接。这样一个自适应标签栏数量的水平导航栏就实现了。

到此,相信大家对“Python怎么使用Qt5实现水平导航栏”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: Python怎么使用Qt5实现水平导航栏

本文链接: https://www.lsjlt.com/news/350831.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Python怎么使用Qt5实现水平导航栏
    本篇内容主要讲解“Python怎么使用Qt5实现水平导航栏”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Python怎么使用Qt5实现水平导航栏”吧!在 Qt5 中可以使用 QWidget 包含...
    99+
    2023-07-05
  • Python使用Qt5实现水平导航栏的示例代码
    在 Qt5 中可以使用 QWidget 包含两个水平布局,通过点击水平布局里的按钮,实现下标滑动与页面的切换。 可以按照以下步骤来实现上面图片中的功能: 导入必要的 Qt 包: f...
    99+
    2023-03-06
    Qt5 水平导航栏 Qt5 导航栏
  • css如何实现垂直导航栏和水平导航栏
    这篇文章给大家分享的是有关css如何实现垂直导航栏和水平导航栏的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   垂直导航栏的样式   <!DOCTYPEhtml>...
    99+
    2024-04-02
  • css如何实现水平导航栏
    这篇文章给大家分享的是有关css如何实现水平导航栏的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 水平导航栏 有两种创建水平导航栏的方法。使用行内或浮动列表项。 两种方法都...
    99+
    2024-04-02
  • 如何使用HTML和CSS实现水平导航标签布局
    如何使用HTML和CSS实现水平导航标签布局封面图现如今,很多网站都采用水平导航标签布局,这种布局形式简洁明了,易于导航和使用。本文将介绍如何使用HTML和CSS来实现水平导航标签布局,并给出具体的代码示例。首先,我们来看看HTML代码的结...
    99+
    2023-10-28
    CSS html 水平导航
  • 怎么用css实现蓝色圆角效果水平导航菜单
    本篇内容主要讲解“怎么用css实现蓝色圆角效果水平导航菜单”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用css实现蓝色圆角效果水平导航菜单”吧!这是一款可...
    99+
    2024-04-02
  • css怎么实现横向导航和竖向导航栏
    小编给大家分享一下css怎么实现横向导航和竖向导航栏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   一、竖向导航   &...
    99+
    2024-04-02
  • Android使用RadioGroup实现底部导航栏
    RadioGroup实现底部导航栏效果,如图:: 实现可最基本的导航栏功能,不能左右滑动,只能点击内嵌的fragment的布局:<?xml version="1.0" encoding="utf-8"?>...
    99+
    2023-05-30
    radiogroup 导航栏 gr
  • css怎么实现动态导航栏
    本篇内容介绍了“css怎么实现动态导航栏 ”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!方案:使用chec...
    99+
    2024-04-02
  • css怎么实现导航栏居中
    这篇“css怎么实现导航栏居中”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css怎么实现导航栏居中”文章吧。首先,在页面中...
    99+
    2023-07-04
  • 怎么在ViewPager中使用Fragment实现侧滑导航栏
    这期内容当中小编将会给大家带来有关怎么在ViewPager中使用Fragment实现侧滑导航栏,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Activity:package com.exampl...
    99+
    2023-06-15
  • 使用html5怎么实现一个横向滑动导航栏
    这篇文章给大家介绍使用html5怎么实现一个横向滑动导航栏,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。首先引入scroll.jshtml部分<!-- 科目导航 --> &nb...
    99+
    2023-06-09
  • 使用CSS怎么实现一个导航栏和下拉菜单
    这篇文章将为大家详细讲解有关使用CSS怎么实现一个导航栏和下拉菜单,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一、CSS导航栏(1)导航栏的作用熟练使用导航栏,对于网站排版非常重要,使用C...
    99+
    2023-06-08
  • 如何使用HTML和CSS实现一个水平滚动导航菜单布局
    如何使用HTML和CSS实现一个水平滚动导航菜单布局在网页设计中,导航菜单是一个非常重要的元素,它可以方便用户浏览和导航网站的内容。而水平滚动导航菜单是一种常见的导航菜单布局,可以在有限的水平空间内显示更多的菜单项,给用户更多的选项。本文将...
    99+
    2023-10-24
    CSS html 实现
  • 使用CSS怎么实现导航栏下划线跟随效果
    使用CSS怎么实现导航栏下划线跟随效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。假设 HTML 结构如下:<ul>  <...
    99+
    2023-06-08
  • android : 底部导航栏的实现(使用ViewPager和BottomNavigationView)
      本案例中需要用的控件ViewPager和BottomNavigationView ViewPager:主要是页面的切换Fragment:碎片(也就是每个页面的内容)BottomNavigationView:底部导航栏 非常简单,主要就...
    99+
    2023-09-01
    android android studio ide
  • 怎么使用CSS制作立体导航栏
    小编给大家分享一下怎么使用CSS制作立体导航栏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css制作的立体导航栏,具体实现代码如下所示:<!doctype...
    99+
    2023-06-08
  • html+css怎么实现简易导航栏功能
    小编给大家分享一下html+css怎么实现简易导航栏功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!二话不说直接上代码<!DOCTYPE htm...
    99+
    2023-06-08
  • html怎么实现点导航栏切换页面
    要实现导航栏切换页面,可以使用HTML和JavaScript来完成。以下是一个简单的示例:1. HTML部分:```html导航栏切...
    99+
    2023-08-08
    html
  • 怎么用HTML+JavaScript实现筋斗云导航栏效果
    这篇文章主要介绍了怎么用HTML+JavaScript实现筋斗云导航栏效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么用HTML+JavaScript实现筋斗云导航栏效果文章都会有所收获,下面我们一起来看...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作