qml 块编辑输入控件 TextEdit TextArea

TextEdit

• 显示一块可编辑的格式化文本，它可以显示纯文本和富文本。显示多行的数据
• 属性：与上一篇文章TextInput属性不同的地方
  baseUrl : url，指定用于解析文本中相对URL的基本URL
  hoveredLink : string，当用户悬停在文本中嵌入的链接时，此属性包含链接字符串。链接必须为富文本格式或HTML格式，并且链接字符串提供对特定链接的访问
  lineCount : int，返回TextEdit项中的总行数
  selectByKeyboard : bool，当编辑器可编辑时，默认为true；当只读时为false
  textDocument : TextDocument，
  textFormat : enumeration，文本显示的格式
• TextEdit.PlainText：（默认）所有样式标签均视为纯文本
  TextEdit.AutoText：自动确定是否应将文本视为富文本格式
  TextEdit.RichText：所有样式标签均视为富文本
  TextEdit.MarkdownText：所有样式标签均视为MarkdownText

textMargin : real，TextEdit中文本周围的边距（以像素为单位）

• 方法
  void append(text)：将带有文本的新段落追加到TextEdit的末尾
  string getFormattedText(start, int end)：返回介于开始位置和结束位置之间的文本部分
  linkAt(x, real y)：返回位于内容坐标中x，y处的链接字符串，如果该点不存在链接，则返回一个空字符串
• 信号
  linkActivated(link)：当用户单击文本中嵌入的链接时，将发出此信号
  linkHovered(link)：当用户悬停在文本中嵌入的链接时，将发出此信号
• 例子：
  wrapMode决定如何折行：4种换行策略
  TextEdit.WordWrap(在单词边界处折行)、
  TextEdit.NoWrap(不折行，超出宽度的文本不显示)、
  TextEdit.WrapAnywhere(折行，不考虑单词边界)、
  TextEdit. Wrap(折行，尽量在单词边界处折行)
  

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    ColumnLayout{
            anchors.centerIn: parent
            spacing: 50
            Rectangle{
                width: 300
                height: 300
                TextEdit {
                        id: textedit
                        height: parent.height
                        width : parent.width
                        padding: 2
                        textFormat: Text.RichText   //文本显示的格式为富文本
                        font.family: "Helvetica"
                        font.pointSize: 40
                        color: "blue"
                        focus: true
                        wrapMode:TextEdit.WrapAnywhere  //决定如何拆行 不考虑单词边界
                    }

            }

            RowLayout{
                spacing: 95
                Button{
                    text: "clear"
                    rightPadding: 20
                    onClicked: {
                        textedit.clear()
                    }
                }

                Button{
                    text: "append"
                    onClicked: {
                        textedit.append("Hello World!")
                    }
                }
            }
        }
}

TextArea

• 多行文本编辑区域。属性和TextField一模一样，只是方法上略有不同。本身不能滚动，要使TextArea可滚动，可以将其放在ScrollView中
  

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    color: "gray"

    ScrollView {
        id: scView
        anchors.centerIn: parent
        width: 200
        height: 100 // 初始高度就是一行
        background: Rectangle {
            anchors.fill: parent
            border.color: "gray"
            radius: 5
        }

        TextArea {
            id: contentText
            wrapMode: TextArea.WrapAnywhere
            font.pixelSize: 25
        }
    }
}