PYQT5侧边栏选项卡的实现

个人对 PyQt的看法

PyQt，顾名思义是一个python的Qt类库。尽管传统PC端界面设计逐渐式微的今天，Qt依然有着生命力。作为Python的几种流行的图形界面之一，它的功能比tkinter更强大，界面也更好看。配合qtdesigner，能够大大提升开发效率。

入门开发的一些建议

虽然流行教程上，推荐的ide是Eric，但是，我个人更支持使用Pycharm+anaconda。当自己不熟悉相关方法的时候，自动补全功能可以提示自己很多内容。
刚入门时推荐在windows或者macos上开发，这样可以减少很多字库和输入法上的奇怪bug。

能做什么

PyQt的框架可以在安卓手机上通过Pydroid编译运行，但是至于打包成.apk，还是挺有困难的。不过在win上，它还是比较方便打包成.exe的。

问题1：怎样实现选项卡效果？

很显然，Pyqt的tab控件能够让自己完成这个功能。然而，现在的应用界面一般是这样的画风：
竖直排列的选项卡用来切换不同的功能页面（比如qq音乐）；

水平排列的选项卡用来切换相同功能、不同内容的界面（比如浏览器，刚才qq音乐的“本地和下载”这几个字下面也是选项卡）

上图浏览器：选项卡为水平排布，不同页面（对于浏览器来说），控件是一样的，只有内容不同。

在qt designer里面，自然可以设定选项卡的方向。但是如果只是简单地设置选项卡方位为West(左侧），你拥有看到文字旋转90度的全新体验。

怎么办呢？
网上大佬的做法大概有两种。第一种使用QPainter来绘制字体，第二种是干脆不使用选项卡结构。
我想了想，使用了第二种方法。

小红框处是一个QListWidget,大红框是一个QStackedWidget.

按下Crtl+R使得QtDesigner进入预览模式。此时，QStackedWidget的右上角会出现一个双箭头，点击切换不同页面。这是因为在qt设计师软件中，QStackedWidget本身并未绑定任何切换逻辑，只能通过点击两个三角切换状态（下图）

而实际运行时，这两个三角是不会出现的。

绑定事件

因此我们怎样做呢？当然是绑定事件！
最简单的方法是在Qt设计师中让QStackedWidget的每一页的索引，分别与左侧QListWidget的索引对应相同。比如下图“待办事项”一页的索引就是0，对应左侧QListWidget的第一项。

class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self, parent=None):
        super(MainWindow, self).__init__(parent)
        self.setupUi(self)     
        
        self.sel.itemClicked.connect(self.switch_stack)
        self.sel.setCurrentRow(0)
        self.switch_stack()
    def switch_stack(self):
        try:
            i = self.sel.currentIndex().row()
            self.stackedWidget.setCurrentIndex(i)
        except:
           pass

sel是左边的QListWidget的名字，stackedWidget是QStackedWidget的名字。

下一步是什么？当然是编辑样式表（我刚刚展示的图片，都是样式表编辑完成的效果，毕竟不想把自己干的活重来一遍······）

编辑样式表

主要针对QlistWidget.

QListWidget#sel{
    outline: 0px;
    border:0px;
    min-width: 120px;
    color: Black;
    background: #F5F5F5;
}

QListWidget#sel::Item{
     height:30px;
}
QListWidget#sel::Item:selected {
    background: rgb(49, 194, 124);
    border-radius:1.5px;
   
}

于是，侧向选项卡的效果就做完啦！