如何在 QML TextArea 中显示空行的选择？

Question

我正在使用TextArea，但选择时遇到一些问题。空行在视觉上未被选择。如何在 QML TextArea 中显示空行的选择？

这是我的看法

这就是我想要的

TextArea {
   selectByMouse: true
   selectionColor: "grey"
   wrapMode: Text.WordWrap
   color: "black"
   textFormat: TextEdit.RichText
   implicitHeight: 200
}

Answer 1

您可以做的一个“技巧”是使用两个 TextArea。主要的

TextArea

用于用户编辑，包括与鼠标的交互。第二个

TextArea

用于渲染选区。

使用辅助

TextArea

，您可以修改 RichText 格式以添加空格

 

。

import QtQuick
import QtQuick.Controls

Page {
    TextArea {
        id: shadow
        width: ta.width
        wrapMode: ta.wrapMode
        textFormat: ta.textFormat
        Component.onCompleted: selectAll()
    }

    TextArea {
        id: ta
        selectByMouse: true
        selectionColor: "transparent"
        wrapMode: Text.WordWrap
        color: "black"
        textFormat: TextEdit.RichText
        implicitHeight: 200
        text: "123<br/>\n<br />\n123<br />\n"
        onTextChanged: Qt.callLater(updateShadow)
        onSelectionStartChanged: Qt.callLater(updateShadow)
        onSelectionEndChanged: Qt.callLater(updateShadow)
        Component.onCompleted: selectAll()
    }
    
    function updateShadow() {
        shadow.text = ta.text.replace(/<br \/>/g, "&nbsp;<br \/>")
        let r1 = ta.positionToRectangle(ta.selectionStart);
        let r2 = ta.positionToRectangle(ta.selectionEnd);
        let s = shadow.positionAt(r1.x, r1.y);
        let e = shadow.positionAt(r2.x, r2.y);
        shadow.select(s, e);
    }
}

您可以在线尝试！