QtQuick TextEdit

TextEdit用于显示多行、可编辑的格式化文本。
可以显示纯文本、富文本。

import QtQuick

TextEdit{
    width: 240
    textFormat: Text.RichText
    text: "<b>Hello</b><i>World!</i>"
    font.family: "Helvetica"
    font.pointSize: 20
    color: "blue"
    focus: true
}

这里将focus设置为true，使TextEdit项目接收键盘输入。

TextEdit没有提供滚动条、光标跟随等通常行为。
一般会使用Flickable元素提供滚动，实现光标跟随。

例如：

import QtQuick

Item {
    width: 400
    height: 300
    Flickable{
        id:flick
        
        anchors.fill: parent
        contentWidth: edit.paintedWidth
        contentHeight: edit.paintedHeight
        clip: true
        
        function ensureVisible(r){
            if(contentX >= r.x)
                contentX = r.x
            else if(contentX + width <= r.x + r.width)
                contentX = r.x + r.width - width
            
            if(contentX >= r.y)
                contentY = r.y
            else if(contentY + height <= r.y + r.height)
                contentY = r.y + r.height - height
        }
        
        TextEdit{
            id:edit
            width: flick.width
            height: flick.height
            font.pointSize: 15
            wrapMode: TextEdit.Wrap
            focus: true
            onCursorRectangleChanged:flick.ensureVisible(cursorRectangle)
        }
        
        Rectangle{
            id:scrollBar
            anchors.right: flick.right
            y: flick.visibleArea.yPosition * flick.height
            width: 10
            height: flick.visibleArea.heightRatio * flick.height
            color: "lightgrey"
        }
    }
}

实际项目中经常用TextArea来代替TextEdit，暂时感觉不是很重要