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