QML改变TextInput或者其它输入框光标颜色

今天有小伙伴问起改变输入框光标颜色的那些事,今天把它记录下来,希望能给大家带来方便。

先看看效果:

QML中自带的TextInput本身是带光标的,默认的是黑色。

TextInput等输入框控件提供了cursorDelegate属性,我们可以通过控件的形式改变,如下:

TextInput{
  id:m_textInput
  font.pixelSize: parent.height
  anchors.fill: parent
  cursorDelegate: cursor
  focus: true
}
Component{
  id:cursor
  Rectangle{
    id:cursorRect
    width: 2
    height: 40
    color: "red"
  }

}

但是你会发现这样改完的图标不会闪烁,定时器吧,可以自定义闪烁频率,代码如下:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    property int num: 1

    Rectangle {
        anchors.fill: parent
        color: "black"

        Rectangle {
            id:centerRect
            width: 300
            height: 50
            anchors.centerIn: parent
            color:"white"
            TextInput{
                id:m_textInput
                font.pixelSize: parent.height
                anchors.fill: parent
                cursorDelegate: cursor
                focus: true
            }
            Component{
                id:cursor
                Rectangle{
                    id:cursorRect
                    width: 2
                    height: 40
                    color: (num == 1) ? "red" : "white"
                }
            }
            Timer{
                interval: 300;
                repeat: true;
                running: true
                onTriggered: {
                    num = (num == 1) ? 0 : 1
                }
            }
        }
    }
}

©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页