15.Quick QML-TextEdit和TextArea

上章学习链接:14.Quick QML-TextInput和TextField详解

1.TextEdit
和TextInput类似,但是它可以设置背景色.并且也可以多行,并且还可以支持富文本输入,由于它的很多属性和TextInput类似,所以类似的属性我们就不描述了,这里我们只学习TextEdit的新属性:

• contentHeight : real,返回当前整个文本的高度(包括多行)
• contentWidth : real,返回当前整个文本的宽度(取最长一行的宽度)
• lineCount : int,返回当前共有多少行
• wrapMode: 设置换行模式,取值有以下几种
  • TextEdit.NoWrap -不自动换行,如果不是自己换行的话,实际上显示的宽度将超过设置的宽度(默认值)
  • TextEdit.WordWrap -如果超出设置的宽度,则在单词之间换行,如果一个单词始终没结束,则始终不换行
  • TextEdit.WrapAnywhere -只要超出设置的宽度,则立马换行.
  • TextEdit.Wrap -换行尽量发生在单词边界；否则，换行将发生在行上的适当点，甚至在单词的中间。
• textDocument : TextDocument.返回此文本编辑的QQuickTextDocument。它可用于使用QSynax高亮器实现语法高亮显示
• textFormat : enumeration,文本格式,默认为纯文本(TextEdit.PlainText),也可以设置为自动检测(TextEdit.AutoText)、富文本(TextEdit.RichText)

Signals

• editingFinished() : 当文本编辑失去焦点时，将发出此信号
• linkActivated(link) : 当鼠标点击链接时,将发出此信号
• linkHovered(link) : 当鼠标徘徊在链接上时,将发出此信号

示例如下所示:

TextEdit {
        100
       text: "See the <a href="http://qt-project.org">Qt Project website</a>."
       textFormat: TextEdit.AutoText

       onLinkActivated: {
           console.log(link)
           Qt.openUrlExternally(link)
       }
   }

2.TextArea
和TextField一样的道理,就是比TextEdit多了可以设置颜色和背景之类的东西.
示例如下所示:

TextArea {
           240
          height: 200
          text:
              "Lorem ipsum dolor sit amet, consectetur adipisicing elit, " +
              "sed do eiusmod tempor incididunt ut labore et dolore magna " +
              "aliqua. Ut enim ad minim veniam, quis nostrud exercitation " +
              "ullamco laboris nisi ut aliquip ex ea commodo cosnsequat. ";

          style: TextAreaStyle {
              backgroundColor: "aliceblue"
              textColor: "black"
              font.pixelSize: 18
              selectedTextColor: "red"
              selectionColor: "blue"
          }
    }

 效果如下: