Номера строк/высота строки для Qml TextArea

Тип TextArea имеет два свойства contentWidth и contentHeight, которые содержат размер текстового содержимого.

Итак, если вы разделите высоту на количество строк (которое вы можете получить с помощью свойства lineCount), вы получите высоту строки:

property int rowHeight: textArea.contentHeight / textArea.lineCount

Но если вы планируете иметь несколько межстрочных интервалов в одном и том же документе, вам придется обрабатывать каждую строку, манипулируя QTextDocument:

class LineManager: public QObject
{
    Q_OBJECT
    Q_PROPERTY(int lineCount READ lineCount NOTIFY lineCountChanged)
public:
    LineManager(): QObject(), document(nullptr)
    {}
    Q_INVOKABLE void setDocument(QQuickTextDocument* qdoc)
    {
        document = qdoc->textDocument();
        connect(document, &QTextDocument::blockCountChanged, this, &LineManager::lineCountChanged);
    }

    Q_INVOKABLE int lineCount() const
    {
        if (!document)
            return 0;
        return document->blockCount();
    }

    Q_INVOKABLE int height(int lineNumber) const
    {
        return int(document->documentLayout()->blockBoundingRect(document->findBlockByNumber(lineNumber)).height());
    }
signals:
    void lineCountChanged();
private:
    QTextDocument* document;
};

    LineManager* mgr = new LineManager();
    QQuickView *view = new QQuickView;
    view->rootContext()->setContextProperty("lineCounter", mgr);
    view->setSource(QUrl("qrc:/main.qml"));
    view->show();

Repeater {
    model: lineCounter.lineCount
    delegate:
        Label {
            color: "#666"
            font: textArea.font
            width: parent.width
            height: lineCounter.height(index)
            horizontalAlignment: Text.AlignRight
            verticalAlignment: Text.AlignVCenter
            renderType: Text.NativeRendering
            text: index+1
            background: Rectangle {
                border.color: "black"
            }
    }
}

Я нашел решение только для QML:

1. Используйте TextEdit вместо TextArea, чтобы избежать проблем с выравниванием между номерами строк и текстом.
2. Используйте «ListView», чтобы сгенерировать номера строк для редактирования текста:

Вот исходное решение:

    RowLayout {
        anchors.fill: parent
        ListView {
            Layout.preferredWidth: 30
            Layout.fillHeight: true
            model: textEdit.text.split(/\n/g)
            delegate: Text { text: index + 1 }
        }
        TextEdit {
            id: textEdit
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
    }

ListView имеет полную копию каждой строки текста. Мы можем использовать эту копию для вычисления высоты строки (с учетом переноса слов). Мы делаем это, создавая невидимый файл Text. Мы можем улучшить ответ, добавив Flickable к TextEdit и синхронизировав прокрутку между ListView и TextEdit:

Вот более полное решение:

// NumberedTextEdit.qml

import QtQuick 2.12
import QtQuick.Controls 2.5

Item {
    property alias lineNumberFont: lineNumbers.textMetrics.font
    property color lineNumberBackground: "#e0e0e0"
    property color lineNumberColor: "black"
    property alias font: textEdit.font
    property alias text: textEdit.text
    property color textBackground: "white"
    property color textColor: "black"

    Rectangle {
        anchors.fill: parent

        color: textBackground

        ListView {
            id: lineNumbers
            property TextMetrics textMetrics: TextMetrics { text: "99999"; font: textEdit.font }
            model: textEdit.text.split(/\n/g)
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.margins: 10
            width: textMetrics.boundingRect.width
            clip: true

            delegate: Rectangle {
                width: lineNumbers.width
                height: lineText.height
                color: lineNumberBackground
                Text {
                    id: lineNumber
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: index + 1
                    color: lineNumberColor
                    font: textMetrics.font
                }

                Text {
                    id: lineText
                    width: flickable.width
                    text: modelData
                    font: textEdit.font
                    visible: false
                    wrapMode: Text.WordWrap
                }
            }
            onContentYChanged: {
                if (!moving) return
                flickable.contentY = contentY
            }
        }

        Item {
            anchors.left: lineNumbers.right
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.margins: 10

            Flickable {
                id: flickable
                anchors.fill: parent
                clip: true
                contentWidth: textEdit.width
                contentHeight: textEdit.height
                TextEdit {
                    id: textEdit
                    width: flickable.width
                    color: textColor
                    wrapMode: Text.WordWrap
                }
                onContentYChanged: {
                    if (lineNumbers.moving) return
                    lineNumbers.contentY = contentY
                }
            }
        }
    }
}

Я обнаружил, что вы можете запросить высоту строки с помощью FontMetrics, а затем получить истинную высоту с помощью Math.ceil(fontMetrics.lineSpacing), например:

TextEdit {
    id: textArea

     FontMetrics {
         id: fontMetricsId
         font: textArea.font
     }

     Component.onCompleted: {
          console.log("Line spacing:" + Math.ceil(fontMetricsId.lineSpacing)
     }
}