QML自定义文本组件：如何实现选复制与行高调整？

需求背景 #

我需要在QML中实现一个自定义文本组件，满足两个核心需求：

• 文本可选中复制：允许用户通过鼠标选中文本，按CTRL+C复制内容
  → 已知将readOnly和selectByMouse均设为true的TextEdit/TextArea组件可原生实现此功能
• 自定义文本行高：能够自由调整文本的行高
  → TextEdit/TextArea组件无直接设置行高的属性；普通Text组件可通过lineHeight调整行高，但不支持选中复制

已尝试的方案及问题 #

RichText模式修改行高 #

根据建议尝试将TextEdit/TextArea设为RichText模式，通过修改富文本内容设置行高：
初始富文本内容：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><meta name="qrichtext" content="1" /><meta charset="utf-8" /><style type="text/css">
p, li { white-space: pre-wrap; }
hr { height: 1px; border-width: 0; }
li.unchecked::marker { content: "\2610"; }
li.checked::marker { content: "\2612"; }
</style></head><body style=" font-family:'Segoe UI'; font-size:15px; font-weight:400; font-style:normal;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;">Line one Line two Line three</p></body></html>

在Component.onCompleted()中动态修改段落样式添加行高：

text.replace("text-indent:0px;", "text-indent:0px; line-height:" + desiredLineHeightInPx + "px;")

此方法能成功设置行高，但会在第一行上方产生空白，尝试设置负margin-top抵消未生效：

var marginToCounteractLineHeight = desiredLineHeightInPx / 2
newText = text.replace("<p style=\" margin-top:0px;", "<p style=\" margin-top:-" + marginToCounteractLineHeight +"px;")

当前采用的方案 #

使用Text组件展示文本，在其上方叠加MouseArea，点击时将文本转移至不可见的TextEdit中，全选后复制到剪贴板，配合动画告知用户：

MouseArea {
    acceptedButtons: Qt.LeftButton
    onClicked {
         // 复制到TextEdit
         myInvisibleTextEdit.text = myText.text
         myInvisibleTextEdit.selectAll()
         myInvisibleTextEdit.copy()
         copyAnimation.start()
    }
}

可行解决方案及常规思路 #

方案一：优化RichText模式的TextEdit/TextArea #

针对RichText方案的空白问题，可通过调整富文本的全局样式解决：

1. 给<body>设置margin:0; padding:0;，消除默认边距
2. 直接给<p>标签设置margin:0; line-height:XXpx;，避免额外间距
   修改后的富文本示例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><meta name="qrichtext" content="1" /><meta charset="utf-8" /><style type="text/css">
p, li { white-space: pre-wrap; margin:0; line-height:20px; }
hr { height: 1px; border-width: 0; }
li.unchecked::marker { content: "\2610"; }
li.checked::marker { content: "\2612"; }
</style></head><body style=" font-family:'Segoe UI'; font-size:15px; font-weight:400; font-style:normal; margin:0; padding:0;">
<p>Line one Line two Line three</p></body></html>

也可提前在<style>中定义全局行高，无需动态替换，更易维护。

方案二：增强Text组件的复制交互 #

当前的Text+MouseArea方案可进一步优化，支持部分文本选中复制：

• 通过MouseArea跟踪鼠标按下、移动事件，计算选中的文本范围
• 将选中的文本片段传给隐藏的TextEdit，再执行复制操作
  这种方案保留了Text组件精准的行高控制，同时实现更贴近原生的选中体验。

常规解决方案总结 #

社区针对这类需求的主流思路分为两种：

1. RichText增强的TextEdit/TextArea：适合需要原生选中、快捷键复制体验的场景，通过富文本样式突破组件的行高限制
2. Text+辅助TextEdit组合：适合对行高有精确要求，且可接受自定义交互的场景，实现成本低、逻辑直观

内容的提问来源于stack exchange，提问作者Sepelio