QML TextEdit组件

TextEdit是QML中用于多行文本编辑的核心组件，相比单行输入的TextInput，它提供了更丰富的文本处理能力，包括多行编辑、富文本支持、光标控制等功能。本文将全面介绍TextEdit的核心特性、使用方法、样式定制以及实际应用技巧，帮助开发者掌握这一重要组件的使用。

TextEdit基础介绍

TextEdit是Qt Quick模块提供的多行文本编辑组件，类似于传统UI框架中的QTextEdit。与单行输入的TextInput不同，TextEdit专注于多行文本的编辑和显示。

基本使用

复制代码

import QtQuick 2.15

TextEdit {
    id: textEdit
    width: 300
    height: 200
    text: "初始文本"
    font.pixelSize: 16
    color: "black"
    wrapMode: TextEdit.WordWrap // 自动换行
}

关键特性：

支持多行文本编辑和显示
提供富文本(HTML子集)和纯文本两种格式
内置多种换行模式控制
支持文本选择、复制粘贴等编辑操作
可通过validator实现输入验证
提供光标位置控制、选区管理等功能

核心属性详解

1. 文本内容与格式

text：编辑框中的文本内容，支持静态文本和动态绑定
textFormat ：文本格式，可选值：
- TextEdit.PlainText：纯文本(默认)
- TextEdit.RichText：富文本(HTML子集)
- TextEdit.AutoText：自动检测文本格式
color：文本颜色，支持颜色名称或十六进制值

font ：字体样式组，包含多个子属性：

复制代码

font {
    family: "Arial"  // 字体
    pixelSize: 16    // 字号
    bold: true       // 加粗
    italic: true     // 斜体
    underline: true  // 下划线
}

2. 布局与显示

wrapMode ：文本换行模式
- TextEdit.NoWrap：不自动换行
- TextEdit.WordWrap：在单词边界处换行(推荐)
- TextEdit.WrapAnywhere：在任何字符处换行
- TextEdit.Wrap：同WordWrap
horizontalAlignment /verticalAlignment：水平和垂直对齐方式
contentWidth /contentHeight：文本内容的实际宽度和高度(可能超出可视区域)
lineCount：只读属性，返回文本行数

3. 交互与选择

readOnly：是否为只读模式
selectByMouse：是否允许鼠标选择文本
selectionColor：选中文本的背景色
selectedTextColor：选中文本的颜色
cursorPosition：当前光标位置
cursorVisible：光标是否可见

滚动与可视区域管理

TextEdit本身不实现滚动行为，需要配合Flickable使用：

复制代码

Flickable {
    id: flick
    width: 300; height: 200
    contentWidth: textEdit.paintedWidth
    contentHeight: textEdit.paintedHeight
    clip: true
    
    TextEdit {
        id: textEdit
        width: flick.width
        height: flick.height
        wrapMode: TextEdit.Wrap
        // 确保光标可见
        onCursorRectangleChanged: ensureVisible(cursorRectangle)
    }
    
    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 (contentY >= r.y)
            contentY = r.y;
        else if (contentY+height <= r.y+r.height)
            contentY = r.y+r.height-height;
    }
}

代码示例：

复制代码

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    TextEdit {
        id: textEdit1
        width: 240
        text: "Hello World"
        font.family: "Source Sans Pro Black"
        font.pointSize: 20
        color: "blue"
        focus: true
        selectedTextColor: "yellow" //选中字体颜色
        selectionColor: "darkgreen" //选中颜色


        onEditingFinished: {
            console.log("onEditingFinished: " + text)
        }

        onTextChanged: {
            console.log("onTextChanged: " + text)
            if(text === "2024")
            {
                console.log("Your password is right.")
            }
        }
    }

    Rectangle {
        id: textEdit2Rectangle
        width: 300
        height: 200
        anchors.left: textEdit1.right
        anchors.leftMargin: 20
        x: 260
        y: 0
        color: "lightgreen"
        radius: 20

        //用于实现可滚动/可拖动的交互区域，其核心功能是允许用户通过触摸或鼠标拖拽手势浏览超出可视区域的内容，并支持惯性滑动效果。
        Flickable {     //即超出文本输入框可以滑动显示
             id: flick

             width: 300
             height: 200

             contentWidth: textEdit2.contentWidth
             contentHeight: textEdit2.contentHeight
             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 (contentY >= r.y)
                     contentY = r.y;
                 else if (contentY+height <= r.y+r.height)
                     contentY = r.y+r.height-height;
             }

            TextEdit {
                id: textEdit2
                width: 300
                height: 200
                text: "Hello World"
                font.pointSize: 32
                color: "red"
                focus: true

                wrapMode: TextEdit.Wrap  //设置换行
                padding: 10  //设置上下左右间距10像素

                onLineCountChanged: {  //输入行变化，即换行触发
                    console.log("lineCount: " + lineCount)
                }
            }
        }
    }

    Rectangle {
        id: textEdit3Rectangle
        width: 300
        height: 200
        anchors.top: textEdit2Rectangle.bottom
        anchors.topMargin: 20
        color: "lightgray"
        radius: 5

        TextEdit {
            id: textEdit3
            anchors.fill: parent
            text: "Hello World"
            font.pointSize: 32
            color: "blue"
            focus: true

            wrapMode: TextEdit.Wrap
            padding: 10
            horizontalAlignment: TextEdit.AlignHCenter

        }
    }
}

效果演示：