当前位置：首页 > news >正文

QML TextEdit组件

news 2025/7/8 5:30:11

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

TextEdit基础介绍

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

基本使用

import QtQuick 2.15TextEdit {id: textEditwidth: 300height: 200text: "初始文本"font.pixelSize: 16color: "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: flickwidth: 300; height: 200contentWidth: textEdit.paintedWidthcontentHeight: textEdit.paintedHeightclip: trueTextEdit {id: textEditwidth: flick.widthheight: flick.heightwrapMode: 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 QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")TextEdit {id: textEdit1width: 240text: "Hello World"font.family: "Source Sans Pro Black"font.pointSize: 20color: "blue"focus: trueselectedTextColor: "yellow" //选中字体颜色selectionColor: "darkgreen" //选中颜色onEditingFinished: {console.log("onEditingFinished: " + text)}onTextChanged: {console.log("onTextChanged: " + text)if(text === "2024"){console.log("Your password is right.")}}}Rectangle {id: textEdit2Rectanglewidth: 300height: 200anchors.left: textEdit1.rightanchors.leftMargin: 20x: 260y: 0color: "lightgreen"radius: 20//用于实现可滚动/可拖动的交互区域，其核心功能是允许用户通过触摸或鼠标拖拽手势浏览超出可视区域的内容，并支持惯性滑动效果。Flickable {     //即超出文本输入框可以滑动显示id: flickwidth: 300height: 200contentWidth: textEdit2.contentWidthcontentHeight: textEdit2.contentHeightclip: truefunction 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: textEdit2width: 300height: 200text: "Hello World"font.pointSize: 32color: "red"focus: truewrapMode: TextEdit.Wrap  //设置换行padding: 10  //设置上下左右间距10像素onLineCountChanged: {  //输入行变化，即换行触发console.log("lineCount: " + lineCount)}}}}Rectangle {id: textEdit3Rectanglewidth: 300height: 200anchors.top: textEdit2Rectangle.bottomanchors.topMargin: 20color: "lightgray"radius: 5TextEdit {id: textEdit3anchors.fill: parenttext: "Hello World"font.pointSize: 32color: "blue"focus: truewrapMode: TextEdit.Wrappadding: 10horizontalAlignment: TextEdit.AlignHCenter}}
}

效果演示：