我与PyQt5有个约会系列教程（9）：看清楚“文本编辑框QTextEdit和文本浏览框QTextBrowser”的鬼脸

1，文本编辑框QTextEdit和文本浏览框QTextBrowser 

相信通过这两个控件的中文名大家应该也知道这两个控件的功能是什么了，前者用来编辑文本，后者无法编辑，只用于显示。

接下来，将通过完成以下程序来讲解这两个控件的用法。

首先，来看一下实际的效果如下：

左边为QTextEdit控件，右边为QTextBrowser控件。

在左边输入文字时，右边会同步显示。

请看下方代码：

# -*- coding: utf-8 -*-

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QTextEdit, QTextBrowser, QHBoxLayout, QVBoxLayout, QMessageBox
from PyQt5.QtGui import QIcon
 
 
class Example(QWidget):
    def __init__(self):
        super(Example, self).__init__()
        self.Init_UI()

    def Init_UI(self):         
        self.setGeometry(300,300,600,400)
        self.setWindowTitle('我与PyQt5有个约会 ')
        self.setWindowIcon(QIcon('myico.ico'))
        #----------------------------------------------------------------------------
        # 本编辑框QTextEdit
        #----------------------------------------------------------------------------
        self.editQLabel = QLabel('本编辑框QTextEdit', self)
        self.textQTextEdit = QTextEdit(self)
        self.textQTextEdit.textChanged.connect(self.show_text_func)
        
        #----------------------------------------------------------------------------
        # 文本浏览框QTextBrowser
        #----------------------------------------------------------------------------
        self.browserQLabel = QLabel('文本浏览框QTextBrowser', self)
        self.textQTextBrowser = QTextBrowser(self)
        
        #----------------------------------------------------------------------------
        # 布局
        #----------------------------------------------------------------------------
        # 竖直布局
        self.edit_v_layout = QVBoxLayout()
        self.edit_v_layout.addWidget(self.editQLabel)
        self.edit_v_layout.addWidget(self.textQTextEdit)
        # 竖直布局
        self.browser_v_layout = QVBoxLayout()
        self.browser_v_layout.addWidget(self.browserQLabel)
        self.browser_v_layout.addWidget(self.textQTextBrowser)
        # 水平布局
        self.all_h_layout = QHBoxLayout()
        self.all_h_layout.addLayout(self.edit_v_layout)
        self.all_h_layout.addLayout(self.browser_v_layout)
 
        self.setLayout(self.all_h_layout)
        #----------------------------------------------------------------------------
        # 布局结束
        #----------------------------------------------------------------------------
 
    def show_text_func(self):
        self.textQTextBrowser.setText(self.textQTextEdit.toPlainText())  
    
    # 关闭程序
    def closeEvent(self, event):

        reply = QMessageBox.question(self, '确认', '确认退出吗', QMessageBox.Yes | QMessageBox.No, QMessageBox.No)
        if reply == QMessageBox.Yes:
            event.accept()        
        else:
            event.ignore()
 
if __name__ == '__main__':
    app = QApplication(sys.argv)
    demo = Example()
    demo.show()
    sys.exit(app.exec_())

程序非常简单。通过实例化两个QLabel、一个QTextEdit以及一个QTextBrowser再通过垂直布局和水平布局就可以完成整个界面。关键点是在信号和槽的连接上。

1. 将self.textQTextEdit的textChanged信号连接到自定义的槽函数上。也就是说当self.textQTextEdit中的文本发生改变的时候，就会发出textChanged信号，然后调用show_text_func()槽函数。

2. 在槽函数中我们通过setText()方法将self.textQTextBrowser的文本设为self.textQTextEdit的文本，而self.textQTextEdit的文本通过toPlainText()获取，而不是text()。

2，该章小总结

1. 顾名思义，QTextEdit为用来编辑文本，而QTextBrowser用来显示文本；

2. setText()用来设置文本，toPlainText()用来获取文本，这两个控件都有这些方法；

3. 浏览框会执行Html代码。