Qt基于Qml文本字段编辑完成事件处理

Posted 2022-11-12

演示效果:

1. 定义文本字段编辑完成信号

signal textFieldEditFinished //编辑完成信号

 2.处理鼠标点击文本字段外窗口其它任意位置

//鼠标点击窗口任意位置
    MouseArea
        anchors.fill: parent
        onClicked: 
            textField.textFieldEditFinished();//发射编辑完成信号
        
    

3.处理在文本字段编辑框按下回车键后

//文本字段编辑完成信号--按下回车键时
        onEditingFinished :
            textField.textFieldEditFinished();//发射编辑完成信号
        

4.文本字段组件定义

//文本字段
    TextField
        id: textField
        text: textMetrics.elidedText
        height: 32
        width: 120
        anchors.centerIn: parent
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment:Text.AlignLeft
        selectByMouse: true
        signal textFieldEditFinished //编辑完成信号
        //背景
        background: Rectangle 
            id: textFieldback
            implicitWidth: 120
            implicitHeight: 32
            border.color:  "#FF00FF"
            visible: false
            radius: 5
        
        //鼠标按下时信号
        onPressed:
            textFieldback.visible = true;//显示边框
            textField.text = textMetrics.text;//填充字段内容
        
        //文本字段编辑完成信号--按下回车键时
        onEditingFinished :
            textField.textFieldEditFinished();//发射编辑完成信号
        
    

5.保存文本组件TextMetrics定义

//保存文本用的TextMetrics
    TextMetrics 
        id: textMetrics
        elide: Text.ElideRight
        elideWidth: textField.width - 12
        text: qsTr("保存文本的TextMetrics")
    

6.通过信号连接器处理文本字段发出的信号

//信号连接器
    Connections
        target: textField
        //处理文本字段发出的编辑完成
        onTextFieldEditFinished:
            //处理编辑完事业务
            if (textFieldback.visible !== true) return;
            textFieldback.visible = false;//隐藏文本字段边框
            textField.focus = false;//取消焦点
            textMetrics.text = textField.text;//保存文本段的内容
            textField.text = textMetrics.elidedText;//超出文本显示...
        
    

 

完整Qml源码

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15

ApplicationWindow 
    visible: true
    width: 400
    height: 300
    title: qsTr("Qt基于Qml文本字段编辑完成事件处理")
    //鼠标点击窗口任意位置
    MouseArea
        anchors.fill: parent
        onClicked: 
            textField.textFieldEditFinished();//发射编辑完成信号
        
    
    //保存文本用的TextMetrics
    TextMetrics 
        id: textMetrics
        elide: Text.ElideRight
        elideWidth: textField.width - 12
        text: qsTr("保存文本的TextMetrics")
    
    //文本字段
    TextField
        id: textField
        text: textMetrics.elidedText
        height: 32
        width: 120
        anchors.centerIn: parent
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment:Text.AlignLeft
        selectByMouse: true
        signal textFieldEditFinished //编辑完成信号
        //背景
        background: Rectangle 
            id: textFieldback
            implicitWidth: 120
            implicitHeight: 32
            border.color:  "#FF00FF"
            visible: false
            radius: 5
        
        //鼠标按下时信号
        onPressed:
            textFieldback.visible = true;//显示边框
            textField.text = textMetrics.text;//填充字段内容
        
        //文本字段编辑完成信号--按下回车键时
        onEditingFinished :
            textField.textFieldEditFinished();//发射编辑完成信号
        
    

    //信号连接器
    Connections
        target: textField
        //处理文本字段发出的编辑完成
        onTextFieldEditFinished:
            //处理编辑完事业务
            if (textFieldback.visible !== true) return;
            textFieldback.visible = false;//隐藏文本字段边框
            textField.focus = false;//取消焦点
            textMetrics.text = textField.text;//保存文本段的内容
            textField.text = textMetrics.elidedText;//超出文本显示...