QML TextArea onEditingFinished On Enter

Question

QML TextArea 从 TextEdit 继承了 onEditingFinished，它在失去焦点或 enter/return 按下时触发。（假设没有输入验证）

但是，与 TextEdit 不同的是，TextArea 和 Enter 无法触发 onEditingFinished，因为它是为换行符捕获的。

此外，在具有单个字段的 window 中，从作为背景的 TextArea 中移除焦点可能不直观，而且大多数其他控件不接受焦点，因此用户必须单击关闭window 或单击菜单栏。

如何在用户编辑多行字符串输入字段后改善触发操作的用户体验？是否使用 Ctrl+Enter 输入换行符，在 Enter 上完成编辑是一个选项，如果是，将如何实现？

这里是这个场景的示例 QML：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
Window {
    visible: true
    width: 640; height: 480
    title: qsTr("Hello World")
    Column {
        TextArea {
            implicitHeight: 200
            placeholderText: qsTr("Enter description")
            onEditingFinished: console.log("Editing complete")
        }
        Label {text: qsTr("Label")}
    }
}

Answer 1

您可以覆盖 Return 按键事件并根据需要进行处理。如果要使用Ctrl+Return，勾选事件中的modifiers属性

        TextArea {
            implicitHeight: 200
            placeholderText: qsTr("Enter description")
            onEditingFinished: console.log("Editing complete")
            
            Keys.onReturnPressed: {
                if (event.modifiers & Qt.ControlModifier) {
                    // Ctrl+Return
                    editingFinished();
                }
                else {
                    // Ignore other cases
                    event.accepted = false;
                }
            }
        }

或者如果您想在不按 Ctrl 键的情况下使用 Return 键，那么您可以简单地这样做：

        TextArea {
            implicitHeight: 200
            placeholderText: qsTr("Enter description")
            onEditingFinished: console.log("Editing complete")
            
            Keys.onReturnPressed: {
                editingFinished();
            }
        }

Answer 2

您可以自己处理简单的 ReturnPressed 和 ctrl+ReturnPressed 或 Shift+ReturnPressed 事件。

在下面的代码中，我使用 Shift+ReturnPressed 作为新行：

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640; height: 480
    title: qsTr("Hello World")

    Column {
        TextArea {
            id: text_area
            implicitHeight: 200
            placeholderText: qsTr("Enter description")
            Keys.onReturnPressed: {
                if(Qt.ShiftModifier)
                    console.log("Editing complete")
                else {
                    text += '\n'
                    text_area.cursorPosition = text_area.length
                }
            }

        }
        Label {text: qsTr("Label")}
    }
}

Answer 3

根据 Jarman () and Farshid616 () 的回答，我想到了这个

    TextArea {
        implicitHeight: 200
        placeholderText: qsTr("Enter description")
        onEditingFinished: console.log("Editing complete")
        
        Keys.onReturnPressed: {
            if(event.modifiers & Qt.ControlModifier) {
                insert(cursorPosition, "\n")
            }
            else {
                editingFinished()
            }
        }
    }

这特别允许在按下 Ctrl+Enter 时在当前光标处插入换行符，并允许在按下未修改的 Enter 时调用 editingFinished

QML TextArea onEditingFinished On Enter

QML TextArea onEditingFinished On Enter

qt

qml

user-experience