如何在 QML 中制作可滑动的 TextField？

Question

这是我得到的：ListView 中的 SwipeDelegate 和填充此委托的 TextField。当我尝试滑动委托时，TextField 获得焦点，但我无法做到这一点。这就是我需要的：在我尝试滑动 TextField 时滑动它，并且仅在我点击它时传递焦点。我需要的一个示例是 iOS 上 "Reminders" 应用程序中注释的行为。是否有可能以某种方式改变这种结构的行为，使其像我需要的那样对滑动做出反应？简化代码：

import QtQuick 2.9
import QtQuick.Controls 2.3
import QtQuick.Window 2.3

Window {
    id: root
    width: 320
    height: 480
    visible: true

    ListModel {
        id: simpleModel

        ListElement {
            text: "some text"
        }

        ListElement {
            text: "another text"
        }
    }

    ListView {
        id: simpleView
        model: simpleModel
        anchors.fill: parent

        delegate: SwipeDelegate {
            width: parent.width
            contentItem: TextField {
                text: model.text
                onAccepted: model.text = text
            }
            swipe.right: Label {
                id: deleteLabel
                text: "Delete"
                color: "white"
                verticalAlignment: Label.AlignVCenter
                padding: 12
                height: parent.height
                anchors.right: parent.right

                SwipeDelegate.onClicked: simpleView.model.remove(index);

                background: Rectangle {
                    color: "tomato"
                }
            }
        }
    }
}

Answer 1

我要建议的是：

readOnly: true

然后对 SwipeDelegate 本身的点击做出反应以启用编辑器：

onClicked: {
    if (!swipe.complete) {
        contentItem.visible = true
        contentItem.forceActiveFocus()
    }
}

虽然这不起作用，因为 TextField 似乎会消耗鼠标事件，即使它是只读的。我不确定这是否是错误；它可以阻止鼠标事件传递到它下面的项目。

无论如何，您可以隐藏 TextField 以防止它干扰鼠标事件，并在其位置显示一些文本：

import QtQuick 2.9
import QtQuick.Controls 2.3
import QtQuick.Window 2.3

Window {
    id: root
    width: 320
    height: 480
    visible: true

    ListModel {
        id: simpleModel

        ListElement {
            text: "some text"
        }

        ListElement {
            text: "another text"
        }
    }

    ListView {
        id: simpleView
        model: simpleModel
        anchors.fill: parent

        delegate: SwipeDelegate {
            id: swipeDelegate
            width: parent.width
            text: model.text

            onClicked: {
                if (!swipe.complete) {
                    contentItem.visible = true
                    contentItem.forceActiveFocus()
                }
            }

            Text {
                anchors.fill: contentItem
                anchors.leftMargin: contentItem.leftPadding
                verticalAlignment: Text.AlignVCenter
                text: model.text
                visible: !contentItem.visible
            }

            contentItem: TextField {
                text: model.text
                visible: false
                onAccepted: model.text = text
            }
            swipe.right: Label {
                id: deleteLabel
                text: "Delete"
                color: "white"
                verticalAlignment: Label.AlignVCenter
                padding: 12
                height: parent.height
                anchors.right: parent.right

                SwipeDelegate.onClicked: simpleView.model.remove(index);

                background: Rectangle {
                    color: "tomato"
                }
            }
        }
    }
}

我不知道 iOS 对 accepting/cancelling 输入有什么作用，但我相信您可以弄清楚那部分。响应该事件并隐藏 TextField，它应该一切正常。

如何在 QML 中制作可滑动的 TextField？

How to make swipeable TextField in QML?

textfield

swipe

qml

ios

qtquickcontrols2