树莓派Qt系列教程19：块编辑输入控件

2020-8-5 14:16| 发布者: dasi| 查看: 6136| 评论: 0|原作者: dasi

摘要: 这一节我们将学习块编辑输入控件........

前言

上一节中我们讲了单行编辑的控件，这一节我们再讲一下多行编辑，也就是块编辑控件，有两个，分别是块文本编辑器TextEdit和块文本编辑区域TextArea。

TextEdit

TextEdit显示一块可编辑的格式化文本，它可以显示纯文本和富文本。它的很多属性和方法和TextInput是一模一样的，最大的区别就是TextInput是显示一行数据，TextEdit是显示多行的数据。所以我们就不详细的讲解TextEdit了。

属性

主要是说一下和TextInput不同的属性和方法，相同的部分我们就不列举了，大家可以参考链接

baseUrl : url，指定用于解析文本中相对URL的基本URL
hoveredLink : string，当用户悬停在文本中嵌入的链接时，此属性包含链接字符串。链接必须为富文本格式或HTML格式，并且链接字符串提供对特定链接的访问
lineCount : int，返回TextEdit项中的总行数
selectByKeyboard : bool，当编辑器可编辑时，默认为true；当只读时为false
textDocument : TextDocument，
textFormat : enumeration，文本显示的格式
textMargin : real，TextEdit中文本周围的边距（以像素为单位）

信号

linkActivated(link)：当用户单击文本中嵌入的链接时，将发出此信号
linkHovered(link)：当用户悬停在文本中嵌入的链接时，将发出此信号

方法

void append(text)：将带有文本的新段落追加到TextEdit的末尾
string getFormattedText(start, int end)：返回介于开始位置和结束位置之间的文本部分
linkAt(x, real y)：返回位于内容坐标中x，y处的链接字符串，如果该点不存在链接，则返回一个空字符串

例程

01ColumnLayout{
02        anchors.centerIn: parent
03        spacing: 50
04        Rectangle{
05            width: 300
06            height: 300
07            TextEdit {
08                    id: textedit
09                    height: parent.height
10                    width : parent.width
11                    padding: 2
12                    textFormat: Text.RichText
13                    font.family: "Helvetica"
14                    font.pointSize: 40
15                    color: "blue"
16                    focus: true
17                    wrapMode:TextEdit.WrapAnywhere
18                }
19 
20        }
21 
22        RowLayout{
23            spacing: 95
24            Button{
25                text: "clear"
26                rightPadding: 20
27                onClicked: {
28                    textedit.clear()
29                }
30            }
31 
32            Button{
33                text: "append"
34                onClicked: {
35                    textedit.append("Hello World!")
36                }
37            }
38        }
39    }

用到了之前布局管理器的内容，我们先定义一个可视化的TextEdit，设置其属性textFormat文本显示的格式为富文本。

TextEdit.PlainText：（默认）所有样式标签均视为纯文本
TextEdit.AutoText：自动确定是否应将文本视为富文本格式
TextEdit.RichText：所有样式标签均视为富文本
TextEdit.MarkdownText：所有样式标签均视为MarkdownText

当一行文本要占用的宽度大于TextEdit的宽度时，wrapMode决定如何折行，它支持TextEdit.WordWrap(在单词边界处折行)、TextEdit.NoWrap(不折行，超出宽度的文本不显示)、TextEdit.WrapAnywhere(折行，不考虑单词边界)、TextEdit. Wrap(折行，尽量在单词边界处折行)4种换行策略。设其wrapMode为WrapAnywhere。然后在列布局管理器中定义两个按钮，点击时分别调用TextEdit的clear和append方法。

TextArea

TextArea是多行文本编辑区域，TextArea使用占位符文本功能拓展了TextEdit,并添加了修饰。TextArea的属性和TextField一模一样，只是方法上略有不同，详情可参考链接

TextArea本身不能滚动，特别是在屏幕大小受限的平台上，通常最好使整个应用程序页面可滚动。但是，请注意，在这种情况下，TextArea的背景装饰会与其他可滚动内容一起滚动。如果要使TextArea可滚动，可以将其放在ScrollView中。

01ScrollView {
02    id: scView
03    anchors.centerIn: parent
04    width: 200
05    height: 100 // 初始高度就是一行
06    background: Rectangle {
07        anchors.fill: parent
08        border.color: "gray"
09        radius: 5
10    }
11 
12    TextArea {
13        id: contentText
14        wrapMode: TextArea.WrapAnywhere
15        font.pixelSize: 25
16    }
17}

将TextArea放置在ScrollView中，设置ScrollView的大小，当我们输入文字超过ScrollView的宽度时，TextArea会自动换行。当超过其高度时，ScrollView会显示滚动栏。效果如下：

总结

对于块编辑输入控件来说，其实就是单行编辑输入控件的延伸，很多属性和方法都是一样的，大家可以和上一节对比着学习。关于编辑输入控件我们就学习到这儿了，下节再会！

198 顶一下

刚表态过的朋友 (198 人)

收藏邀请

上一篇：树莓派Qt系列教程18：行编辑输入控件下一篇：树莓派Qt系列教程20：对话框

树莓派Qt系列教程19：块编辑输入控件

前言

TextEdit

属性

信号

方法

例程

TextArea

总结

刚表态过的朋友 (198 人)

相关阅读