PyQT5实现的小笔记本的实例

先看看看基本界面吧

功能：

新建笔记，保存笔记，字体更改，字体大小更改，选择字体加粗、下划线、斜体、前景色更改。

添加菜单栏与工具栏

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('' % 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
图标文件