diff --git a/images/add.png b/images/add.png new file mode 100644 index 0000000..9750170 Binary files /dev/null and b/images/add.png differ diff --git a/images/add.svg b/images/add.svg index 35f13a1..2037b0a 100644 --- a/images/add.svg +++ b/images/add.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/images/menu.png b/images/menu.png new file mode 100644 index 0000000..fcb6822 Binary files /dev/null and b/images/menu.png differ diff --git a/images/up-down.svg b/images/up-down.svg new file mode 100644 index 0000000..5618ea1 --- /dev/null +++ b/images/up-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/main/main.py b/main/main.py index 5553c76..ecbf1a8 100644 --- a/main/main.py +++ b/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) diff --git a/resource/current.qss b/resource/current.qss index b24d882..b68d8bd 100644 --- a/resource/current.qss +++ b/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;*/ -/*}*/ \ No newline at end of file +/*}*/ + + +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); +} + diff --git a/test/QListWidgetTest.py b/test/QListWidgetTest.py new file mode 100644 index 0000000..35f138d --- /dev/null +++ b/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") + diff --git a/view/AddListLabel.py b/view/AddListLabel.py new file mode 100644 index 0000000..834c760 --- /dev/null +++ b/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) diff --git a/view/SelfListWidgetItem.py b/view/SelfListWidgetItem.py index 3da9905..380a8af 100644 --- a/view/SelfListWidgetItem.py +++ b/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()) + + # 添加右键菜单 diff --git a/view/UserLabel.py b/view/UserLabel.py index eb65302..0300837 100644 --- a/view/UserLabel.py +++ b/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_())