QML_块编辑输入控件

QML_块编辑输入控件

概述： TextEdit显示一块可编辑的格式化文本，它可以显示纯文本和富文本。它的很多属性和方法和TextInput是一模一样的，最大的区别就是TextInput是显示一行数据，TextEdit是显示多行的数据。所以我们就不详细的讲解TextEdit了。
属性：
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处的链接字符串，如果该点不存在链接，则返回一个空字符串

TextEdit的使用：
textFormat文本显示的格式
TextEdit.PlainText：（默认）所有样式标签均视为纯文本
TextEdit.AutoText：自动确定是否应将文本视为富文本格式
TextEdit.RichText：所有样式标签均视为富文本
TextEdit.MarkdownText：所有样式标签均视为MarkdownText
wrapMode决定如何折行
TextEdit.WordWrap(在单词边界处折行)
TextEdit.NoWrap(不折行，超出宽度的文本不显示)
TextEdit.WrapAnywhere(折行，不考虑单词边界)
TextEdit. Wrap(折行，尽量在单词边界处折行)4种换行策略

Window {
    id: window
    color: "Beige"
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    ColumnLayout {
        anchors.centerIn: parent
        spacing: 50
        Rectangle {
            width: 300
            height: 300
            TextEdit {
                id: textedit
                height: parent.height
                width: parent.width
                padding: 2
                textFormat: TextEdit.RichText
                font.family: "Helvetica"
                font.pointSize: 40
                color: "blue"
                focus: true
                wrapMode: TextEdit.Wrap
            }
        }

        RowLayout {
            spacing: 95
            Button {  //清除按钮
                text: "clear"
                rightPadding: 20
                onClicked: {
                    textedit.clear()
                }
            }

            Button {   //手动增加文本内容
                text: "append"
                onClicked: {
                    textedit.append("Hello World!")
                }
            }
        }
    }
}

TextArea的使用：
注意：TextArea本身不能滚动，特别是在屏幕大小受限的平台上，通常最好使整个应用程序页面可滚动。但是，请注意，在这种情况下，TextArea的背景装饰会与其他可滚动内容一起滚动。如果要使TextArea可滚动，可以将其放在ScrollView中，设置ScrollView的大小，当我们输入文字超过ScrollView的宽度时，TextArea会自动换行。当超过其高度时，ScrollView会显示滚动栏

Window {
    id: window
    color: "Beige"
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")

    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
        }
    }
}