添加右键菜单！修改部分布局

images/add.svg

@@ -1 +1,3 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1648731620831" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14080" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M863.328 482.56l-317.344-1.12L545.984 162.816c0-17.664-14.336-32-32-32s-32 14.336-32 32l0 318.4L159.616 480.064c-0.032 0-0.064 0-0.096 0-17.632 0-31.936 14.24-32 31.904C127.424 529.632 141.728 544 159.392 544.064l322.592 1.152 0 319.168c0 17.696 14.336 32 32 32s32-14.304 32-32l0-318.944 317.088 1.12c0.064 0 0.096 0 0.128 0 17.632 0 31.936-14.24 32-31.904C895.264 496.992 880.96 482.624 863.328 482.56z" p-id="14081"></path></svg>
+<RCC>
+  <qresource prefix="新前缀"/>
+</RCC>

images/up-down.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649062005582" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2357" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M715.946667 554.666667H304.64a4.266667 4.266667 0 0 0-3.84 6.4l205.653333 328.533333a4.266667 4.266667 0 0 0 7.253334 0l205.653333-328.533333a4.266667 4.266667 0 0 0-3.413333-6.4z m-411.306667-85.333334h411.306667a4.266667 4.266667 0 0 0 3.413333-6.4L512 133.973333a4.266667 4.266667 0 0 0-7.253333 0l-203.946667 328.533334a4.266667 4.266667 0 0 0 3.84 6.4z" p-id="2358" fill="#707070"></path></svg>

main/main.py

@@ -4,7 +4,6 @@ import sys
 from PyQt5.QtGui import *
 from PyQt5.QtWidgets import *
 from PyQt5.QtCore import Qt
-
 from utils.QSSLoader import QSSLoader
 from view.UserLabel import User
 from view.SelfListWidgetItem import SelfListWidgetItem
@@ -27,6 +26,22 @@ class MainWidget(QWidget):
         # 可自定义添加的listWidget
         self.self_listWidget = QListWidget(self)
         self.sub_layout.addWidget(self.self_listWidget, 7)
+
+        # todo
+        # 需要把下面的重写QLabel解决问题，单个QLabel无法解决问题
+
+        self.add_item_label = QLabel('新建列表')
+        self.add_item_label.setMaximumHeight(50)
+        self.add_item_label.setObjectName('add_item_label')
+        # self.add_item_label.setPixmap(QPixmap())
+        self.sub_layout.addWidget(self.add_item_label, 1)
+        # 禁止双击可编辑
+        self.self_listWidget.setEditTriggers(QAbstractItemView.NoEditTriggers)
+        # 右键菜单
+        self.self_listWidget.setContextMenuPolicy(Qt.CustomContextMenu)
+        self.self_listWidget.setObjectName('self_listWidget')
+        self.self_listWidget.customContextMenuRequested.connect(self.myListWidgetContext)
+
         # 右侧层叠窗口
         self.stackedWidget = QStackedWidget(self)
 
@@ -35,7 +50,7 @@ class MainWidget(QWidget):
         layout.addWidget(self.stackedWidget, 2)
 
         self.one_day = SelfListWidgetItem('我的一天', 1, os.getcwd() + '/../images/sun.svg')
-        self.self_listWidget.setCurrentRow(1)
+        self.system_listWidget.setCurrentRow(1)
         # self.one_day.setSelected(True)
         self.important = SelfListWidgetItem('重要', 0, os.getcwd() + '/../images/star.svg')
 
@@ -43,20 +58,73 @@ class MainWidget(QWidget):
         self.initUI()
 
     def initUI(self):
+        # 系统默认的两个 item
         self.system_listWidget.addItem(self.one_day)
         self.system_listWidget.setItemWidget(self.one_day, self.one_day.widget)
 
         self.system_listWidget.addItem(self.important)
-
         self.system_listWidget.setItemWidget(self.important, self.important.widget)
 
+        self.two_day = SelfListWidgetItem('我的一天', 1, os.getcwd() + '/../images/sun.svg')
+        self.self_listWidget.addItem(self.two_day)
+        self.self_listWidget.setItemWidget(self.two_day, self.two_day.widget)
+
         pass
 
+    # todo
+    # 仔细研究右键菜单
+
+    def myListWidgetContext(self, position):
+        # 设置右键菜单
+        pop_menu = QMenu(self)
+
+        rename_action = QAction(u'重命名', self)
+
+        copy_action = QAction("复制分组", self)
+        del_action = QAction("删除分组", self)
+
+        # 查看右键时是否在item上面,如果不在.就不显示删除和修改.
+        pop_menu.addAction(rename_action)
+        if self.self_listWidget.itemAt(position):
+            pop_menu.addAction(del_action)
+            pop_menu.addAction(rename_action)
+
+        rename_action.triggered.connect(self.RenameItem)
+        copy_action.triggered.connect(self.CreateNewItem)
+        del_action.triggered.connect(self.DeleteItem)
+        pop_menu.exec_(self.self_listWidget.mapToGlobal(position))
+
+    # 创建新的分组
+    def CreateNewItem(self):
+        # 创建一个没有名字的item
+        item = QListWidgetItem("")
+        item.setTextAlignment(Qt.AlignCenter)
+        # 使得item是可以编辑的.
+        item.setFlags(item.flags() | Qt.ItemIsEditable)
+        self.self_listWidget.addItem(item)
+        # 创建后就可以编辑item,用户自己起名字.
+        self.self_listWidget.editItem(item)
+
+    # 删除分组
+    def DeleteItem(self):
+        self.self_listWidget.takeItem(self.self_listWidget.currentRow())
+
+    # 重命名分组
+    def RenameItem(self):
+        curRow = self.self_listWidget.currentRow()
+        item = self.self_listWidget.item(curRow)
+        item.setFlags(item.flags() | Qt.ItemIsEditable)
+        self.self_listWidget.editItem(item)
+        self.self_listWidget.itemChanged.connect(lambda: self.ChangeItem(item))
+
+    def ChangeItem(self, item):
+        print("test")
+
 
 class MainWindow(QWidget):
     def __init__(self):
         super(MainWindow, self).__init__()
-        self.resize(1050, 800)
+        self.resize(1150, 850)
         self.setWindowTitle("待办事项")
         # 主布局，用来显示主页面，设置页面等
         self.layout = QStackedLayout(self)

resource/current.qss

@@ -1,11 +1,17 @@
 /*去掉item虚线边框*/
+* {
+/*    background: #f3f3f3;*/
+    color: black ;
+}
 QListWidget, QListView, QTreeWidget, QTreeView {
     outline-style: 0px;
+
+
 }
 /*设置左侧选项的最小最大宽度,文字颜色和背景颜色*/
 QListWidget {
-    min-width: 250px;
-    max-width: 250px;
+    min-width: 300px;
+    max-width: 300px;
     color: white;
     background: #f3f3f3;
     border:none;
@@ -14,14 +20,19 @@ QListWidget {
 /*被选中时的背景颜色和左边框颜色*/
 QListWidget::item:selected {
     background: #eaeaea;
-    border-right: 4px solid rgb(9, 187, 7);
+    border-left: 4px solid rgb(9, 187, 7);
+}
+
+/*鼠标悬浮时的背景颜色*/
+QListWidget::item:hover {
+    background: #eaeaea;
 }
 
 
 /*设置QListWidgetItem样式*/
 QListWidget::item {
     color: red;
-    font-family:#f3f3f3 ;
+    font-family: black ;
 /*    border-right: 4px solid rgb(9, 187, 7);*/
 }
 
@@ -59,7 +70,7 @@ QListWidget::item {
 /*右侧的层叠窗口的背景颜色*/
 QStackedWidget {
     color:snow;
-    background: black;
+/*    background: black;*/
 }
 /*todo_count_label 气泡效果*/
 QLabel#todo_count_label {
@@ -71,6 +82,23 @@ QLabel#todo_count_label {
     border:1px solid black;
     font-size:10px;
 }
+/*设置用户名金和用户邮箱样式*/
+
+QLabel#pic_label{
+/*    text-align:center;*/
+    background: #f3f3f3;
+    padding-right:25px;
+}
+QLabel#menu{
+    padding-right:10px;
+}
+/*主界面最下面的添加*/
+QLabel#add_item_label{
+    text-align:right;
+    background:url(../images/add.png) ;
+    background-repeat:0;
+
+}
 /*QLineEdit {*/
 /*    border: 2px solid rgb(52,52,52);*/
 /*    border-top-left-radius:10px;  */
@@ -78,4 +106,43 @@ QLabel#todo_count_label {
 /*    border-bottom-left-radius:10px;*/
 /*    border-bottom-right-radius:10px;*/
 
-/*}*/
+/*}*/
+
+
+QMenu {
+    /* 半透明效果 */
+    background-color: rgba(255, 255, 255, 230);
+    border: none;
+    border-radius: 4px;
+}
+
+QMenu::item {
+    border-radius: 4px;
+    /* 这个距离很麻烦需要根据菜单的长度和图标等因素微调 */
+    padding: 8px 48px 8px 36px; /* 36px是文字距离左侧距离*/
+    background-color: transparent;
+}
+
+/* 鼠标悬停和按下效果 */
+QMenu::item:selected {
+    border-radius: 0px;
+    /* 半透明效果 */
+    background-color: rgba(232, 232, 232, 232);
+}
+
+/* 禁用效果 */
+QMenu::item:disabled {
+    background-color: transparent;
+}
+
+/* 图标距离左侧距离 */
+QMenu::icon {
+    left: 15px;
+}
+
+/* 分割线效果 */
+QMenu::separator {
+    height: 1px;
+    background-color: rgb(232, 236, 243);
+}
+

test/QListWidgetTest.py

@@ -0,0 +1,54 @@
+
+        self.leftWidget =QListWidget()
+        #禁止双击可编辑
+        self.leftWidget.setEditTriggers(QAbstractItemView.NoEditTriggers)
+        #右键菜单
+        self.leftWidget.setContextMenuPolicy(Qt.CustomContextMenu)
+        self.leftWidget.customContextMenuRequested.connect(self.myListWidgetContext)
+
+    def myListWidgetContext(self,position):
+        #弹出菜单
+        popMenu = QMenu()
+        creAct =QAction("新建分组",self)
+        delAct =QAction("删除分组",self)
+        renameAct =QAction(u'重命名', self)
+        #查看右键时是否在item上面,如果不在.就不显示删除和修改.
+        popMenu.addAction(creAct)
+        if self.leftWidget.itemAt(position):
+            popMenu.addAction(delAct)
+            popMenu.addAction(renameAct)
+
+        creAct.triggered.connect(self.CreateNewItem)
+        renameAct.triggered.connect(self.RenameItem)
+        delAct.triggered.connect(self.DeleteItem)
+        popMenu.exec_(self.leftWidget.mapToGlobal(position))
+
+    #创建新的分组
+    def CreateNewItem(self):
+    	#创建一个没有名字的item
+        item =QListWidgetItem("")
+        item.setTextAlignment(Qt.AlignCenter)
+        #使得item是可以编辑的.
+        item.setFlags(item.flags() | Qt.ItemIsEditable)
+        self.leftWidget.addItem(item)
+        #创建后就可以编辑item,用户自己起名字.
+        self.leftWidget.editItem(item)
+
+
+
+#删除分组
+    def DeleteItem(self):
+        self.leftWidget.takeItem(self.leftWidget.currentRow())
+
+    #重命名分组
+    def RenameItem(self):
+        curRow =self.leftWidget.currentRow()
+        item=self.leftWidget.item(curRow)
+        item.setFlags(item.flags() | Qt.ItemIsEditable)
+        self.leftWidget.editItem(item)
+        self.leftWidget.itemChanged.connect(lambda :self.ChangeItem(item))
+
+
+    def ChangeItem(self,item):
+        print("test")
+

view/AddListLabel.py

@@ -0,0 +1,9 @@
+from PyQt5.QtGui import *
+from PyQt5.QtWidgets import *
+from PyQt5.QtCore import Qt
+
+
+class AddList(QLabel):
+    def __init__(self):
+        super(AddList, self).__init__()
+        self.widget = QWidget(self)

view/SelfListWidgetItem.py

@@ -39,16 +39,20 @@ class SelfListWidgetItem(QListWidgetItem):
         # todo
         # 需要设置qss使字体靠中间一点
         # 如果有气泡使气泡靠右
+        # done
 
         layout.addWidget(self.item_name_label, 3)
 
         if self.todo_count:
-            print(self.todo_count)
+            # 打印出代办数目
+            print('todo_count:', self.todo_count)
             self.todo_count_label = QLabel(str(self.todo_count))
-            self.todo_count_label.setFixedSize(16,16)
+            self.todo_count_label.setFixedSize(16, 16)
             self.todo_count_label.setScaledContents(True)
             self.todo_count_label.setObjectName('todo_count_label')
             self.todo_count_label.setAlignment(Qt.AlignCenter)
             layout.addWidget(self.todo_count_label, 1)
         # 设置自定义的QListWidgetItem的sizeHint，不然无法显示
         self.setSizeHint(self.widget.sizeHint())
+
+        # 添加右键菜单

view/UserLabel.py

@@ -1,17 +1,43 @@
 import os
+import string
 import sys
+from random import randint, choice
 
 from PyQt5.QtWidgets import *
 from PyQt5.QtGui import *
 from utils.QSSLoader import QSSLoader
-from PyQt5.QtCore import Qt
+from PyQt5.QtCore import Qt, pyqtSignal
+
+
+# def get_icon():
+#     # 测试模拟图标
+#     pixmap = QPixmap(16, 16)
+#     pixmap.fill(Qt.transparent)
+#     painter = QPainter()
+#     painter.begin(pixmap)
+#     painter.setFont(QFont('Webdings', 11))
+#     painter.setPen(Qt.GlobalColor(randint(4, 18)))
+#     painter.drawText(0, 0, 16, 16, Qt.AlignCenter,
+#                      choice(string.ascii_letters))
+#     painter.end()
+#     return QIcon(pixmap)
+
+
+def about_qt():
+    # 关于Qt
+    QApplication.instance().aboutQt()
 
 
 class User(QLabel):
+    # 自定义信号, 注意信号必须为类属性
+    # button_clicked_signal = pyqtSignal()
+
     def __init__(self):
         super(User, self).__init__()
         self.widget = QWidget(self)
-        self.resize(200, 60)
+        self.widget.setMaximumWidth(300)
+        # self.resize(200, 60)
+        self.setObjectName('User')
         # todo
         # 修改布局使适合微软todo的样式
         # 设置点击事件，使用右键菜单的样式添加设置、同步、退出
@@ -19,32 +45,76 @@ class User(QLabel):
         layout = QHBoxLayout()
         info_layout = QVBoxLayout()
         self.pic_label = QLabel('')
+        self.pic_label.setObjectName('pic_label')
         self.pic_label.setPixmap(
             QPixmap(os.path.abspath('../') + '/images/user.svg').scaled(50, 50, Qt.IgnoreAspectRatio,
                                                                         Qt.SmoothTransformation))
-        layout.addWidget(self.pic_label, Qt.AlignCenter)
-        layout.addStretch(2)
+        layout.addWidget(self.pic_label, 2)
+        # layout.addStretch(2)
         self.user_name = QLabel("用户登录")
-        self.user_mail = QLabel('邮箱')
+        self.user_name.setObjectName('user_name')
+        self.user_mail = QLabel('794508986@qq.com')
+        self.user_mail.setObjectName('user_mail')
         self.user_mail.setStyleSheet('font-size:16px')
+        self.menu_label = QLabel('')
+        self.menu_label.setObjectName('menu')
+        self.menu_label.setPixmap(
+            QPixmap(os.path.abspath('../') + '/images/up-down.svg').scaled(20, 20, Qt.IgnoreAspectRatio,
+                                                                           Qt.SmoothTransformation))
 
         info_layout.addWidget(self.user_name)
         info_layout.addWidget(self.user_mail)
-        layout.addLayout(info_layout)
-        layout.addStretch(0)
+        layout.addLayout(info_layout, 4)
+        layout.addStretch(1)
+        layout.addWidget(self.menu_label, 1)
 
         self.widget.setLayout(layout)
-        # # 设置自定义的QListWidgetItem的sizeHint，不然无法显示
-        # self.setSizeHint(self.widget.sizeHint())
+        # 设置右键菜单
+        self.context_menu = QMenu(self)
+        self.init_menu()
+
+    # def mouseReleaseEvent(self, QMouseEvent):
+    #     self.button_clicked_signal.emit()
+    #
+
+    # 可在外部与槽函数连接 用处不大
+    # def connect_customized_slot(self, func):
+    #     self.button_clicked_signal.connect(func)
+
+    def contextMenuEvent(self, event):
+        self.context_menu.exec_(event.globalPos())
+
+    def init_menu(self):
+        # 背景透明
+        self.context_menu.setAttribute(Qt.WA_TranslucentBackground)
+        # 无边框、去掉自带阴影
+        self.context_menu.setWindowFlags(
+            self.context_menu.windowFlags() | Qt.FramelessWindowHint | Qt.NoDropShadowWindowHint)
+
+        self.context_menu.addAction(QIcon(os.getcwd() + '/../images/setting.svg'), '设置', self.setting)
+
+        self.context_menu.addAction(QIcon(os.getcwd() + '/../images/sync.svg'), '同步', self.sync)
+        self.context_menu.addAction(QIcon(os.getcwd() + '/../images/sync.svg'), '退出', self.exit_account)
+
+    # todo
+    # 设置右键点击事件
+    def setting(self):
+        pass
+
+    def sync(self):
+        pass
+
+    def exit_account(self):
+        pass
 
 
-if __name__ == "__main__":
-    app = QApplication(sys.argv)
-    main = User()
-    style_sheet = QSSLoader.read_qss_file('../resource/current.qss')
-    main.setStyleSheet(style_sheet)
-    # print(os.path.abspath('../'))
-
-    app.setWindowIcon(QIcon(os.path.abspath('../') + '/images/todo.svg'))
-    main.show()
-    sys.exit(app.exec_())
+# if __name__ == "__main__":
+#     app = QApplication(sys.argv)
+#     main = User()
+#     style_sheet = QSSLoader.read_qss_file('../resource/current.qss')
+#     main.setStyleSheet(style_sheet)
+#     # print(os.path.abspath('../'))
+#
+#     app.setWindowIcon(QIcon(os.path.abspath('../') + '/images/todo.svg'))
+#     main.show()
+#     sys.exit(app.exec_())