Forums

OverviewV-Play 2 Support (Qt 5) › TextEdit line height

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #14016

    Ryan

    Ok guy.

    Im trying to make a text editor with v-play and qml but i can not for the love of life find a solution to this problem.

    I have created a very simple editor with line numbers (Im still figuring out all the sizing etc and getting the line height of the AppTextEdit text and the number item to the left). The problem is that no matter what options or properties i have tried to change and look up online i can’t change the spacing between lines (line height in css) or the spacing between each line. Can anyone help pleeeeeeez. Thank you

     

    import VPlayApps 1.0
    import QtQuick 2.6
    import Qt.labs.controls 1.0

    Item {
    id: editorRoot

    // property var linesModel
    // property var myView
    // property var listView: listView

    property string fontFace: “Monospace”
    property var cursor: Qt.IBeamCursor
    property bool ctrl: false

    property int fontSize: swt(2.4)

    property var lineHeight: fontMetrics.lineSpacing

    property alias font: textEdit.font
    property alias text: textEdit.text
    // property var lineNumbersWidth: fontMetrics.advanceWidth(” + (myView ? myView.lines() : “0”))
    property var editorFont: editorRoot.fontSize + “pt \”” + editorRoot.fontFace + “\”” + “, monospace”
    property var spaceWidth: 25
    property var tabWidth: spaceWidth * 4

    property real numbersColumnWidth: sw(5)

    onEditorFontChanged: {
    editorRoot.spaceWidth = fontMetrics.advanceWidth(‘ ‘);
    }

    FontMetrics {
    id: fontMetrics
    font.family: editorRoot.fontFace
    font.pointSize: editorRoot.fontSize
    }

    anchors.fill: parent

    Rectangle {
    height: parent.height
    anchors.right: parent.right
    width: 1
    color: “#ddd”
    }

    Column {
    width: parent.width

    Repeater {
    model: editorRoot.height / editorRoot.lineHeight
    delegate: Text {
    id: text
    width: numbersColumnWidth
    height: editorRoot.lineHeight / 100 * 98
    color: “#666”
    font: textEdit.font
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
    renderType: Text.NativeRendering
    text: index + 1
    }
    }
    }

    Rectangle {
    anchors {
    fill: textEdit
    leftMargin: -10
    }
    }

    AppTextEdit {
    id: textEdit

    property int currentLine: text.substring(0, cursorPosition).split(/\r\n|\r|\n/).length – 1
    textMargin: 30
    font.pixelSize: {
    wordSpacing:5
    editorRoot.fontSize
    }
    wrapMode: Text.WordWrap
    anchors {
    fill: parent
    topMargin: 2
    leftMargin: numbersColumnWidth + 10
    }
    selectByKeyboard: true
    selectByMouse: true
    textFormat: Qt.PlainText
    }

    Column {
    anchors.fill: parent

    Repeater {
    model: editorRoot.height / editorRoot.lineHeight

    Rectangle {
    color: index === textEdit.currentextEdittLine ? “blue” : “transparent”
    height: editorRoot.lineHeigh
    width: editorRoot.width
    opacity: 0.2
    }
    }
    }
    }

    #14063

    Günther
    V-Play Team

    Hi Ryan!

    The Text QML type provides a lineHeight property to read or set the line height of the text. For the TextEdit, this property is not available. However, it is possible to read the TextEdit::lineCount, which at least allows to calculate the lineHeight based on the height. You can use this for implementing the line numbers, e.g. like this:

    import VPlayApps 1.0
    import QtQuick 2.0
    
    Item {
      id: editorRoot
    
      // line height and line count of text edit
      readonly property real lineHeight: (textEdit.implicitHeight - 2 * textEdit.textMargin) / textEdit.lineCount
      readonly property alias lineCount: textEdit.lineCount
      
      // ...
    
      Column {
        // start position of line numbers depends on text margin
        y: textEdit.textMargin
        width: parent.width
    
       // add line numbers based on line count and height
        Repeater {
          model: editorRoot.lineCount
          delegate: Text {
            id: text
            width: implicitWidth
            height: editorRoot.lineHeight
            color: "#666"
            font: textEdit.font
            text: index + 1
          }
        }
      }
    
      // ...
    
      AppTextEdit {
        id: textEdit
    
        property int currentLine: text.substring(0, cursorPosition).split(/\r\n|\r|\n/).length - 1
        textMargin: 30
        wrapMode: Text.WordWrap
        anchors {
          fill: parent
          topMargin: 2
          leftMargin: numbersColumnWidth + 10
        }
        selectByKeyboard: true
        selectByMouse: true
        textFormat: Qt.PlainText
        verticalAlignment: TextEdit.AlignTop
      }
    
     // ...
    }

    Hope this helps!

    Best,
    Günther

Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support