Qt QML - 在QML​​中识别出mousearea范围

Question

我创建了一个qtquick 2.4文件，在文件中我使用了TextInput和ListView。我想要的是当用户在TextInput中写一些东西时，ListView出现在TextInput下面向用户提示一些单词，当用户点击ListView或TextInput的MouseArea时，在qtquick文件的任何地方，ListView都被隐藏了。但是我的问题是当用户单击ListView或TextInput的MouseArea时，我不知道如何隐藏listview？我尝试使用Menu组件而不是ListView，但由于使用Menu组件时出现问题，我无法使用它。

Rectangle{
    height: 400;
    width: 400;

Rectangle {
id: cbxRoot;
width: 150
height: 45;
color: "white";
border.color: "black";
radius: 5;
property bool cbxtriggered: false;

TextInput
{
    id: cbxTextBox;
    anchors.top: parent.top;
    width: 150
    height:45 ;
    verticalAlignment: Text.AlignVCenter;
    color: "black";
    horizontalAlignment: Text.AlignHCenter;
    clip: true;
    readOnly: false;

    MouseArea
    {
        id: cbxMouseArea;
        anchors.fill: parent;
        enabled: true;

        onClicked:
        {
            cbxTextBox.focus = true;
            if(cbxRoot.cbxtriggered)
            {
                cbxRoot.cbxtriggered = false;
            }
            else
            {
                cbxRoot.cbxtriggered = true;
            }
        }
    }

    selectByMouse: true;

    Keys.onPressed:
    {
        cbxRoot.cbxtriggered = true;
    }

    onTextChanged:
    {
        var maxChar = 30;
        var txtInput = cbxTextBox;
        if(txtInput.text.length > maxChar)
        {
            txtInput.text = txtInput.text.substring(0,maxChar);
            txtInput.cursorPosition = maxChar;
        }
    }
}

ListModel
{
    id: cbxListModel;
    ListElement { name: "Theme"; number: 0 }
    ListElement { name: "Theme"; number: 1 }
    ListElement { name: "Theme"; number: 2 }
    ListElement { name: "Theme"; number: 3 }
    ListElement { name: "Theme"; number: 4 }
}

ListView
{
    id: cbxListView;
    anchors.top : cbxTextBox.bottom;
    visible: cbxRoot.cbxtriggered;
    focus: true;
    displayMarginBeginning: contentHeight;
    displayMarginEnd: contentHeight;
    spacing: 2;
    model: cbxListModel;
    delegate: Text {
          text: name + ", " + number
      }

    clip: false;
    width: cbxRoot.width;
    height: 70;
}
}
}

Answer 1

尝试在输入控件（MouseArea和InputText的正下方）创建ListView，无论点击什么，都应取消输入模式。鼠标事件由输入控件处理和使用的方式，但它们之外的事件由MouseArea处理。看看这段代码：

import QtQuick 2.2

Rectangle{
    height: 400
    width: 400
    border.width: 5

    property alias inputFocused: inputTextBox.focus

    ListModel{
        id: cbxListModel;
        ListElement { name: "Theme"; number: 0 }
        ListElement { name: "Theme"; number: 1 }
        ListElement { name: "Theme"; number: 2 }
        ListElement { name: "Theme"; number: 3 }
        ListElement { name: "Theme"; number: 4 }
    }

    MouseArea{
        id: cancelArea
        anchors.fill: parent

        enabled: inputFocused
        visible: enabled
        z: inputGroup.z-1 // just beneath inputGroup

        onClicked: inputFocused = false
    }

    Item{
        id: inputGroup
        anchors{
            top: parent.top
            topMargin: 56
            horizontalCenter: parent.horizontalCenter
        }

        // if there are more controls, raise the z parameter
        // to raise cancelArea over them but beneath inputGroup
        z: inputFocused ? 99 : 0

        width: 200
        height: 200

        TextInput{
            id: inputTextBox
            anchors{
                top: parent.top
            }
            width: parent.width
            height: 24
            Rectangle{
                anchors.fill: parent
                anchors.margins: -3
                color: "transparent"
                border.width: 1
            }
        }

        ListView{
            id: cbxListView;
            anchors{
                top: inputTextBox.bottom
                topMargin: 12
            }
            width: parent.width
            height: 70;

            visible: inputFocused;

            model: cbxListModel;
            spacing: 2;
            delegate: Text {
                  text: name + ", " + number
              }

            clip: false;
        }

    }
}

我希望这个解决方案符合您的需求。