1

I want to change the default shape of text edit Cursor and it should be like below

Cursor shape

TextArea {
    id: txtTalk
    anchors.fill: parent
    leftPadding: 9
    rightPadding: 9
    wrapMode: TextArea.Wrap
    color: Material.color(Material.Red,Material.Shade900)
    background: Rectangle{
        radius: 3
        color: Material.color(Material.Red,Material.Shade50)
        border.width: 1
        border.color: Material.color(Material.Red,Material.Shade300)
    }
}
eyllanesc
  • 235,170
  • 19
  • 170
  • 241
mohsen
  • 1,763
  • 3
  • 17
  • 55
  • I found this post which might help you https://stackoverflow.com/questions/58719796/qml-change-cursor-color-in-textfield have a look at the cursorDelegate property – iam_peter Feb 16 '21 at 12:57

1 Answers1

0

The following code should do what you want. You could also add blinking animations, have look at this CursorDelegate example. The only issue with SVG in QML is the poor aliasing. What you could do is compose the "pin" of two Rectangles one with rounded corners (radius property) and the other one rotated. Or you could have a look at how to get rid of aliasing with SVGs in QML.

Instead of using PathSVG you could also compose your pin icon of PathLine and PathArc.

Keep in mind that I didn't pay attention on dynamic placement of the pin and its scaling, I tweaked the values until it looked alright. Another thing would be to scale the pin in relation to your font size.

enter image description here

import QtQuick 2.0
import QtQuick.Controls 2.15
import QtQuick.Shapes 1.15

Item {
    width: 640
    height: 480

    TextArea {
        anchors.centerIn: parent
        wrapMode: TextArea.Wrap
        color: "gray"
        font.pixelSize: 24
        background: Rectangle{
            implicitWidth: 300
            implicitHeight: 200
            radius: 3
            color: "white"
            border.width: 1
            border.color: "black"
        }
        placeholderText: qsTr("Enter description")

        cursorDelegate: Item {
            width: 1
            Rectangle {
                id: rectangle
                color: "black"
                y: 1
                width: 2
                height: parent.height - 2

                Shape {
                    x: -8
                    y: rectangle.height + 2

                    ShapePath {
                        fillColor: "red"
                        strokeWidth: -1
                        scale: Qt.size(0.2, 0.2)
                        PathSvg { path: "M 45,90 C 25.463,90 9.625,74.162 9.625,54.625 c 0,-8.722 3.171,-16.693 8.404,-22.861 L 45,0 71.97,31.765 c 5.233,6.167 8.404,14.139 8.404,22.861 C 80.375,74.162 64.537,90 45,90 Z" }
                    }
                }
            }
        }
    }
}
iam_peter
  • 3,205
  • 1
  • 19
  • 31
  • 1
    It shows indicator.But,It should be display just when I'm editng not always,and the default cursor is showing too how hide that – mohsen Feb 16 '21 at 17:27