嵌入式学习小组
直播中

刘宇

7年用户 154经验值
私信 关注

请问块编辑控件有哪几种?

块文本编辑器TextEdit和块文本编辑区域TextArea详细介绍

回帖(2)

田硕

2020-11-13 10:41:18
  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方法。
  
举报

李森

2020-11-13 10:41:37
  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会显示滚动栏。效果如下:
  
举报

更多回帖

发帖
×
20
完善资料,
赚取积分