先看看看基本界面吧
功能:
新建笔记,保存笔记,字体更改,字体大小更改,选择字体加粗、下划线、斜体、前景色更改。
添加菜单栏与工具栏
self.toolbar = self.addToolBar('tool')
self.bold_f = QAction(setImage(':/m_image/img/B.bmp'), '&加粗', self)
self.insert_img = QAction(setImage(':/m_image/img/Open.bmp'), '&插入图片', self)
self.save_f = QAction(QIcon(':/m_image/img/Save.bmp'), '&保存', self)
self.new_f = QAction(QIcon(':/m_image/img/new.bmp'), '&新建', self)
self.u_line = QAction(QIcon(':/m_image/img/u.bmp'), '&下划线', self)
self.italic_f = QAction(QIcon(':/m_image/img/i.bmp'), '&斜体', self)
self.help = QAction(QIcon(':/m_image/img/help.bmp'), '&帮助', self)
self.exit = QAction('&退出', self)
self.fonts = QFontComboBox(self.toolbar)
font2 = QFont()
font2.setPointSize(14)
self.fonts.setFont(font2)
self.sizes = QFontDatabase.standardSizes()
self.colors = QColor.colorNames()
self.color = QComboBox()
self.color.setFont(font2)
self.font_size = QComboBox()
self.font_size.setFont(font2)
# 新建的图标的样式,以及对应的响应(toolbar与menubar)
self.new_f.setStatusTip('新建一个笔记')
self.new_f.triggered.connect(self.newFile)
self.menu.addAction(self.new_f)
# 保存的图标的样式,以及对应的响应(toolbar与menubar)
self.save_f.setStatusTip('保存当前笔记')
self.save_f.triggered.connect(self.saveFile)
self.menu.addAction(self.save_f)
# 插入的图标的样式,以及对应的响应(toolbar与menubar)
self.insert_img.setStatusTip('插入图片文件')
self.insert_img.triggered.connect(self.insertImage)
self.menu.addAction(self.insert_img)
# 对选择的字体操作的样式,以及对应的响应(toolbar与menubar) 加粗
self.bold_f.setStatusTip('对选中的字体加粗')
self.bold_f.triggered.connect(self.set_bold)
self.bold_f.setCheckable(True)
# 对选择的字体操作的样式,以及对应的响应(toolbar与menubar) 下划线
self.u_line.setStatusTip('对选中的字体添加下划线')
self.u_line.triggered.connect(self.add_underline)
self.u_line.setCheckable(True)
# 对选择的字体操作的样式,以及对应的响应(toolbar与menubar) 斜体
self.italic_f.setStatusTip('对选中的字体转变斜体')
self.italic_f.triggered.connect(self.set_italic)
self.italic_f.setCheckable(True)
self.menu_2.addAction(self.bold_f)
self.menu_2.addAction(self.u_line)
self.menu_2.addAction(self.italic_f)
# 帮助文档(可以自定义)
self.help.setStatusTip('打开帮助文档')
self.help.triggered.connect(self.showHelp)
# 退出
self.exit.setStatusTip('退出')
self.exit.triggered.connect(QApplication.instance().quit)
self.menu_3.addAction(self.help)
self.menu_3.addAction(self.exit)
# 更改字体
self.fonts.setStatusTip('更改字体')
self.fonts.setObjectName('字体')
self.fonts.activated.connect(lambda: self.setTextFont(self.fonts.currentText()))
# 更改字体大小
self.font_size.setStatusTip('更改字体大小')
self.font_size.setObjectName('大小')
# 添加字体的size到combobox里面
self.font_size.addItems([str(size)for size in self.sizes])
self.font_size.activated.connect(lambda: self.setTextFont(self.font_size.currentText()))
# 更改选择的文本前景色
self.color.setStatusTip('更改选择字体的颜色')
self.color.addItems(self.colors)
# 让每个item的背景色设置成文本所对应的颜色,方便使用
model = self.color.model() # 获取combobox对应的使用模型
for i in range(self.color.count()):
model.item(i).setBackground(QColor(self.color.itemText(i)))
self.color.activated.connect(lambda: self.setColor(self.color.currentText()))
self.toolbar.addAction(self.new_f)
self.toolbar.addAction(self.save_f)
self.toolbar.addAction(self.insert_img)
self.toolbar.addAction(self.bold_f)
self.toolbar.addAction(self.u_line)
self.toolbar.addAction(self.italic_f)
self.toolbar.addWidget(self.fonts)
self.toolbar.addSeparator()
self.toolbar.addWidget(self.font_size)
self.toolbar.addSeparator()
self.toolbar.addWidget(self.color)
小编认为的比较重要的地方在于怎么设置QComboBox的每个item的背景色,这里我们提出来
self.color.addItems(self.colors)
# 让每个item的背景色设置成文本所对应的颜色,方便使用
model = self.color.model() # 获取combobox对应的使用模型
for i in range(self.color.count()):
model.item(i).setBackground(QColor(self.color.itemText(i)))
self.color.activated.connect(lambda: self.setColor(self.color.currentText()))
这里面的model是QComboBox所使用的model的样式,可以通过这个model才能进行item的颜色、字体、背景色、前景色等属性的配置。
文件命名规则
这里我们使用的文件的命名规则是“主题_标题”的形式进行命名,文件保存,我们使用HTML的形式进行保存,这样的保存形式是QTextEdit所特有的,并且HTML格式的保存形式,可以支持我们文件查看起来,对字体、字体颜色、文本里面插入的图片文件都有固定格式的作用,能够完全还原当时我们创建这个笔记的场景。
if self.lineEdit.text() == '' or self.lineEdit_2.text() == '':
QMessageBox().warning(self, 'Error', '请输入当前笔记的主题'if self.lineEdit.text() == ''else '请输入当前笔记的标题', QMessageBox.Ok)
html_path = './Record/' + self.lineEdit.text() + '_' + self.lineEdit_2.text() + '.html'
with open(html_path, 'w')as f:
f.write(self.textEdit.toHtml())
这样可以直接将HTML文件写入到我们的路径下,这里我们使用默认的根路径(./Record/)要求在__init__()下就判断这个文件夹是否存在,不存在就创建这个文件夹(os.mkdir)
插入图片文件
在QTextEdit里面可以插入图片文件,这样我们就可以在创建笔记的时候,能够将图片进行粘贴,由于小编学艺还不是很精通,所以只能使用打开文件的形式进行插入图片
image_path = QFileDialog().getOpenFileName(self, '获取插入图片', '', '图像文件(*.jpg *.png *.bmp)')
if image_path[0] == '':
return
self.textEdit.append('<img src="%s">' % image_path[0])
QFileDialog().getOpenFileName返回的是一个列表,里面第一个元素是图片的路径,如果没有选择图片则是“”,textEdit.append这是添加图片的路径到text文档中,这样图片就可以在文档中看到图片的样式,不在是一串文件的路径,备注:如果使用直接拖拽的形式拖进文本编辑框的话,出现的是(file:///+路径)
帮助文档的实现
先看看界面效果吧
要弹出这个帮助文档的提示窗,我们需要使用QDockWidget的控件,这个控件是一个可以制作成悬浮窗,也可以是停靠窗
dock = QDockWidget('帮助', self)
dock.setFloating(True)
text = QLabel(NOTE)
dock.setWidget(text)
dock.show()
这里我们使用属性setFloating来设置dock控件是悬浮的状态,最后别忘了show一下。
结束
这是第一篇文章,写得不好请见谅。
图标文件资源也是源于csdn
图标文件