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

This commit is contained in:
liyp 2022-04-04 22:34:07 +08:00
parent 2e5778fcab
commit ca9c55ba91
10 changed files with 307 additions and 32 deletions

BIN
images/add.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 176 B

View file

@ -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>

Before

Width:  |  Height:  |  Size: 809 B

After

Width:  |  Height:  |  Size: 47 B

BIN
images/menu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

1
images/up-down.svg Normal file
View file

@ -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>

After

Width:  |  Height:  |  Size: 776 B

View file

@ -4,7 +4,6 @@ import sys
from PyQt5.QtGui import * from PyQt5.QtGui import *
from PyQt5.QtWidgets import * from PyQt5.QtWidgets import *
from PyQt5.QtCore import Qt from PyQt5.QtCore import Qt
from utils.QSSLoader import QSSLoader from utils.QSSLoader import QSSLoader
from view.UserLabel import User from view.UserLabel import User
from view.SelfListWidgetItem import SelfListWidgetItem from view.SelfListWidgetItem import SelfListWidgetItem
@ -27,6 +26,22 @@ class MainWidget(QWidget):
# 可自定义添加的listWidget # 可自定义添加的listWidget
self.self_listWidget = QListWidget(self) self.self_listWidget = QListWidget(self)
self.sub_layout.addWidget(self.self_listWidget, 7) 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) self.stackedWidget = QStackedWidget(self)
@ -35,7 +50,7 @@ class MainWidget(QWidget):
layout.addWidget(self.stackedWidget, 2) layout.addWidget(self.stackedWidget, 2)
self.one_day = SelfListWidgetItem('我的一天', 1, os.getcwd() + '/../images/sun.svg') 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.one_day.setSelected(True)
self.important = SelfListWidgetItem('重要', 0, os.getcwd() + '/../images/star.svg') self.important = SelfListWidgetItem('重要', 0, os.getcwd() + '/../images/star.svg')
@ -43,20 +58,73 @@ class MainWidget(QWidget):
self.initUI() self.initUI()
def initUI(self): def initUI(self):
# 系统默认的两个 item
self.system_listWidget.addItem(self.one_day) self.system_listWidget.addItem(self.one_day)
self.system_listWidget.setItemWidget(self.one_day, self.one_day.widget) self.system_listWidget.setItemWidget(self.one_day, self.one_day.widget)
self.system_listWidget.addItem(self.important) self.system_listWidget.addItem(self.important)
self.system_listWidget.setItemWidget(self.important, self.important.widget) 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 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): class MainWindow(QWidget):
def __init__(self): def __init__(self):
super(MainWindow, self).__init__() super(MainWindow, self).__init__()
self.resize(1050, 800) self.resize(1150, 850)
self.setWindowTitle("待办事项") self.setWindowTitle("待办事项")
# 主布局,用来显示主页面,设置页面等 # 主布局,用来显示主页面,设置页面等
self.layout = QStackedLayout(self) self.layout = QStackedLayout(self)

View file

@ -1,11 +1,17 @@
/*去掉item虚线边框*/ /*去掉item虚线边框*/
* {
/* background: #f3f3f3;*/
color: black ;
}
QListWidget, QListView, QTreeWidget, QTreeView { QListWidget, QListView, QTreeWidget, QTreeView {
outline-style: 0px; outline-style: 0px;
} }
/*设置左侧选项的最小最大宽度,文字颜色和背景颜色*/ /*设置左侧选项的最小最大宽度,文字颜色和背景颜色*/
QListWidget { QListWidget {
min-width: 250px; min-width: 300px;
max-width: 250px; max-width: 300px;
color: white; color: white;
background: #f3f3f3; background: #f3f3f3;
border:none; border:none;
@ -14,14 +20,19 @@ QListWidget {
/*被选中时的背景颜色和左边框颜色*/ /*被选中时的背景颜色和左边框颜色*/
QListWidget::item:selected { QListWidget::item:selected {
background: #eaeaea; background: #eaeaea;
border-right: 4px solid rgb(9, 187, 7); border-left: 4px solid rgb(9, 187, 7);
}
/*鼠标悬浮时的背景颜色*/
QListWidget::item:hover {
background: #eaeaea;
} }
/*设置QListWidgetItem样式*/ /*设置QListWidgetItem样式*/
QListWidget::item { QListWidget::item {
color: red; color: red;
font-family:#f3f3f3 ; font-family: black ;
/* border-right: 4px solid rgb(9, 187, 7);*/ /* border-right: 4px solid rgb(9, 187, 7);*/
} }
@ -59,7 +70,7 @@ QListWidget::item {
/*右侧的层叠窗口的背景颜色*/ /*右侧的层叠窗口的背景颜色*/
QStackedWidget { QStackedWidget {
color:snow; color:snow;
background: black; /* background: black;*/
} }
/*todo_count_label 气泡效果*/ /*todo_count_label 气泡效果*/
QLabel#todo_count_label { QLabel#todo_count_label {
@ -71,6 +82,23 @@ QLabel#todo_count_label {
border:1px solid black; border:1px solid black;
font-size:10px; 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 {*/ /*QLineEdit {*/
/* border: 2px solid rgb(52,52,52);*/ /* border: 2px solid rgb(52,52,52);*/
/* border-top-left-radius:10px; */ /* border-top-left-radius:10px; */
@ -79,3 +107,42 @@ QLabel#todo_count_label {
/* border-bottom-right-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);
}

54
test/QListWidgetTest.py Normal file
View file

@ -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")

9
view/AddListLabel.py Normal file
View file

@ -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 file

@ -39,11 +39,13 @@ class SelfListWidgetItem(QListWidgetItem):
# todo # todo
# 需要设置qss使字体靠中间一点 # 需要设置qss使字体靠中间一点
# 如果有气泡使气泡靠右 # 如果有气泡使气泡靠右
# done
layout.addWidget(self.item_name_label, 3) layout.addWidget(self.item_name_label, 3)
if self.todo_count: 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 = 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.setScaledContents(True)
@ -52,3 +54,5 @@ class SelfListWidgetItem(QListWidgetItem):
layout.addWidget(self.todo_count_label, 1) layout.addWidget(self.todo_count_label, 1)
# 设置自定义的QListWidgetItem的sizeHint不然无法显示 # 设置自定义的QListWidgetItem的sizeHint不然无法显示
self.setSizeHint(self.widget.sizeHint()) self.setSizeHint(self.widget.sizeHint())
# 添加右键菜单

View file

@ -1,17 +1,43 @@
import os import os
import string
import sys import sys
from random import randint, choice
from PyQt5.QtWidgets import * from PyQt5.QtWidgets import *
from PyQt5.QtGui import * from PyQt5.QtGui import *
from utils.QSSLoader import QSSLoader 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): class User(QLabel):
# 自定义信号, 注意信号必须为类属性
# button_clicked_signal = pyqtSignal()
def __init__(self): def __init__(self):
super(User, self).__init__() super(User, self).__init__()
self.widget = QWidget(self) self.widget = QWidget(self)
self.resize(200, 60) self.widget.setMaximumWidth(300)
# self.resize(200, 60)
self.setObjectName('User')
# todo # todo
# 修改布局使适合微软todo的样式 # 修改布局使适合微软todo的样式
# 设置点击事件,使用右键菜单的样式添加设置、同步、退出 # 设置点击事件,使用右键菜单的样式添加设置、同步、退出
@ -19,32 +45,76 @@ class User(QLabel):
layout = QHBoxLayout() layout = QHBoxLayout()
info_layout = QVBoxLayout() info_layout = QVBoxLayout()
self.pic_label = QLabel('') self.pic_label = QLabel('')
self.pic_label.setObjectName('pic_label')
self.pic_label.setPixmap( self.pic_label.setPixmap(
QPixmap(os.path.abspath('../') + '/images/user.svg').scaled(50, 50, Qt.IgnoreAspectRatio, QPixmap(os.path.abspath('../') + '/images/user.svg').scaled(50, 50, Qt.IgnoreAspectRatio,
Qt.SmoothTransformation)) Qt.SmoothTransformation))
layout.addWidget(self.pic_label, Qt.AlignCenter) layout.addWidget(self.pic_label, 2)
layout.addStretch(2) # layout.addStretch(2)
self.user_name = QLabel("用户登录") 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.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_name)
info_layout.addWidget(self.user_mail) info_layout.addWidget(self.user_mail)
layout.addLayout(info_layout) layout.addLayout(info_layout, 4)
layout.addStretch(0) layout.addStretch(1)
layout.addWidget(self.menu_label, 1)
self.widget.setLayout(layout) 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__": # if __name__ == "__main__":
app = QApplication(sys.argv) # app = QApplication(sys.argv)
main = User() # main = User()
style_sheet = QSSLoader.read_qss_file('../resource/current.qss') # style_sheet = QSSLoader.read_qss_file('../resource/current.qss')
main.setStyleSheet(style_sheet) # main.setStyleSheet(style_sheet)
# print(os.path.abspath('../')) # # print(os.path.abspath('../'))
#
app.setWindowIcon(QIcon(os.path.abspath('../') + '/images/todo.svg')) # app.setWindowIcon(QIcon(os.path.abspath('../') + '/images/todo.svg'))
main.show() # main.show()
sys.exit(app.exec_()) # sys.exit(app.exec_())