写在前面

  正在用pyqt写我们比赛项目的客户端,针对左侧选项卡,写了一个简单的demo。记录一下。

环境

  Python3.5.2

  PyQt5

陈述

  用的结构是左边一个QListWidget + 右边QStackedWidget,将QWebView加在QStackedWidget上(因为打算用来展示一些charts,用的pyecharts做的数据可视化,生成的html文件,直接嵌入在客户端内,因此用QWebView来显示,关于pyecharts可以看我另外一篇文章https://www.cnblogs.com/jyroy/p/9446486.html)

  我用的QSS来进行QListWidget的美化,做成类似网易云音乐的侧边栏的样子,我用的是QSS Editor写的QSS(强烈推荐,好用!!),py代码、QSS代码和效果展示如下

  详细注释见代码

py代码如下

 #!/usr/bin/env python
# -*- coding:utf-8 -*-
# Author: jyroy
import sys from PyQt5.QtCore import QUrl
from PyQt5.QtWebKitWidgets import QWebView
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWidgets import QListWidget,QStackedWidget
from PyQt5.QtWidgets import QListWidgetItem
from PyQt5.QtWidgets import QWidget
from PyQt5.QtWidgets import QHBoxLayout from PyQt5.QtCore import QSize, Qt class LeftTabWidget(QWidget):
'''左侧选项栏'''
def __init__(self):
super(LeftTabWidget, self).__init__()
self.setObjectName('LeftTabWidget') self.setWindowTitle('LeftTabWidget')
with open('D:/python/code/qt/test/QSS/QListWidgetQSS.qss', 'r') as f: #导入QListWidget的qss样式
self.list_style = f.read() self.main_layout = QHBoxLayout(self, spacing=0) #窗口的整体布局
self.main_layout.setContentsMargins(0,0,0,0) self.left_widget = QListWidget() #左侧选项列表
self.left_widget.setStyleSheet(self.list_style)
self.main_layout.addWidget(self.left_widget) self.right_widget = QStackedWidget()
self.main_layout.addWidget(self.right_widget) self._setup_ui() def _setup_ui(self):
'''加载界面ui''' self.left_widget.currentRowChanged.connect(self.right_widget.setCurrentIndex) #list和右侧窗口的index对应绑定 self.left_widget.setFrameShape(QListWidget.NoFrame) #去掉边框 self.left_widget.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff) #隐藏滚动条
self.left_widget.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff) list_str = ['岗位需求','专业要求','薪水分布','城市分布']
url_list = ['job_num_wordcloud.html', 'edu_need.html', 'salary_bar.html', 'edu_salary_bar.html'] for i in range(4):
self.item = QListWidgetItem(list_str[i],self.left_widget) #左侧选项的添加
self.item.setSizeHint(QSize(30,60))
self.item.setTextAlignment(Qt.AlignCenter) #居中显示 self.browser = QWebView() #右侧用QWebView来显示html网页
self.browser.setUrl(QUrl.fromLocalFile('D://python//code//vision//%s' % url_list[i]))
self.right_widget.addWidget(self.browser) def main():
''' '''
app = QApplication(sys.argv) main_wnd = LeftTabWidget()
main_wnd.show() app.exec() if __name__ == '__main__':
main()

QSS代码如下

 QListWidget, QListView, QTreeWidget, QTreeView {
outline: 0px;
} QListWidget {
min-width: 120px;
max-width: 120px;
color: Black;
background: #F5F5F5;
} QListWidget::Item:selected {
background: lightGray;
border-left: 5px solid red;
}
HistoryPanel:hover {
background: rgb(52, 52, 52);
}

效果展示

  

写在后面

  因为只是写了一个demo,所以没有进行很深入的调整,主要展示侧边栏,大家见谅~

  欢迎交流!

  

PyQt:左侧选项卡的更多相关文章

  1. mui 左侧选项卡-div模式 的选项卡切换监听

    使用$('#segmentedControls').on('change', '.mui-control-item', function () { })和 document.getElementByI ...

  2. 仿酷狗音乐播放器开发日志二十四 选项设置窗体的实现(附328行xml布局源码)

    转载请说明原出处,谢谢~~ 花了两天时间把仿酷狗的选项设置窗体做出来了,当然了只是做了外观.现在开学了,写代码的时间减少,所以整个仿酷狗的工程开发速度减慢了.今天把仿酷狗的选项设置窗体的布局代码分享出 ...

  3. 【Web】十步教你搭建完整免费的个人网站(花生壳+XAMPP+WordPress)

    1.从花生壳官网(http://www.oray.com/peanuthull/download.php)下载最新版本的客户端. 下载完成后安装,注册护照(需手机验证码验证),注册完成后获取免费域名并 ...

  4. idea自我使用简单使用方式和出现的一些简单问题以及常用快捷键

    首先配置完Idea的简单使用步骤后,今天在使用Idea时,一直持续提示web项目404的错误提示,因为之前使用idea时,部署的是springBoot的项目,使用的是SpringBoot自带的Tomc ...

  5. [js高手之路]html5 canvas动画教程 - 自己动手做一个类似windows的画图软件

    这个绘图工具,我还没有做完,不过已经实现了总架构,以及常见的简易图形绘制功能: 1,可以绘制直线,圆,矩形,正多边形[已完成] 2,填充颜色和描边颜色的选择[已完成] 3,描边和填充功能的选择[已完成 ...

  6. 史上最全最详细的环境搭建教程,行百里者手把手教你在windows下搭建Anaconda+pycharm+库文件(TensorFlow,numpy)环境搭建

    我是在搭建TensorFlow开发环境的道路上走了很多弯路 掉了很多头发,为了让广大同学们不在受苦受累 下面我将手把手教你学习如特快速搭建python环境 快速导入numpy,PIL,pillow,等 ...

  7. Python的环境搭建——万丈高楼平地起

    Python的环境搭建,远程连接,端口映射,虚拟机 写在正文之前 python语言的开发环境还是相对比较简单的,但是也是有很多需要注意的地方,对于初次接触python或者以前很少用到虚拟环境的朋友来说 ...

  8. 在Navicat中如何新建数据库和表并做查询

    上一篇文章,小编给大家分享了在Navicat中如何远程连接数据库,没有来得及上车的小伙伴可以戳这篇文章:在Ubuntu14.04中配置mysql远程连接教程.今天小编给大家分享一下如何在Navicat ...

  9. Django(九) xadmin全局配置

    xadmin的使用,首先需要对model进行注册,才能在后台管理中进行操作. 1.在app里创建py文件:adminx(必须这个名称) 2.导入xadmin和models里的类,格式如下: 其中lis ...

随机推荐

  1. C# 后台通过网络地址访问百度地图取回当前在地图上的经纬度,并将取回的复杂Json格式字符串反序列化(Newtonsoft.Json)

    直接上代码:解释都在代码中 ak 要自己去百度地图申请. 其中申请ak的时候,有个属性render直接填*就行. namespace HampWebControl 是我的空间命名! namespace ...

  2. angular.isUndefined()

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. [LeetCode] Fibonacci Number 斐波那契数字

    The Fibonacci numbers, commonly denoted F(n) form a sequence, called the Fibonacci sequence, such th ...

  4. zepto.js-定制zepto步骤

    对以上步骤作简单补充 步骤四:在电脑左下角搜索Node.js command prompt 打开这个命令窗口,然后进入zepto-master 即文件存放的位置.也可以直接用cmd进入zepto-ma ...

  5. 手机touch事件及参数【转】(自己懒得写了,找了一篇摘过来)

    [html5构建触屏网站]之touch事件 前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是 ...

  6. 微服务(Microservices)和服务网格(Service Mesh)架构概念整理

    注:文章内容为摘录性文字,自己阅读的一些笔记,方便日后查看. 微服务(Microservices) 在过去的 2016 年和 2017 年,微服务技术迅猛普及,和容器技术一起成为这两年中最吸引眼球的技 ...

  7. 麒麟子Cocos Creator实用技巧

    大家好,我是麒麟子, 开源棋牌<幼麟棋牌-四川麻将>(泄漏版叫 <达达麻将>)作者,成都幼麟科技创始人. 自09年进入游戏行业以来,不知不觉已经度过了十个春秋. 曾经我也血气方 ...

  8. [.net 面向对象程序设计深入](31)实战设计模式——使用Ioc模式(控制反转或依赖注入)实现松散耦合设计(1)

    [.net 面向对象程序设计深入](31)实战设计模式——使用IoC模式(控制反转或依赖注入)实现松散耦合设计(1) 1,关于IOC模式 先看一些名词含义: IOC: Inversion of con ...

  9. [Swift]LeetCode37. 解数独 | Sudoku Solver

    Write a program to solve a Sudoku puzzle by filling the empty cells. A sudoku solution must satisfy  ...

  10. [Swift]LeetCode151. 翻转字符串里的单词 | Reverse Words in a String

    Given an input string, reverse the string word by word. Example: Input: "the sky is blue", ...