QML TextArea onEditingFinished On Enter

Question

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

但是，与TextEdit不同的是，不能使用Enter从TextArea触发 onEditingFinished，因为它是为换行符捕获的。

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

编辑多行字符串输入字段后，如何改善触发操作的用户体验？ 换行符是否使用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 ( https://stackoverflow.com/a/69723941/1581658 ) 和 Farshid616 ( https://stackoverflow.com/a/69724074/1581658 ) 的回答，我想出了这个

    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