c++ - QML 中的列表视图出现在我的窗口中的其他对象下方

Question

我创建了一个最小的工作示例来显示我的问题。我要做的是创建一个可以在用户输入时过滤的国家工作列表。除了一个主要缺点外，这非常有效。列表视图绘制在屏幕中其他元素的下方。这是 MWE 的代码来说明我的问题。

我的 main.qml

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 1280
    height: 720
    title: qsTr("MWE")

    Rectangle {
        id: rect1
        color: "#ff0000"
        width: 440
        height: 30
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 20
    }

    VMAutoCompleteComboBox{
        id: diagDBDefaultCountry
        width: 440
        height: 30
        vmList: {
            var list = loader.getCountryList()
            return list;
        }
        vmValues: loader.getCountryCodeList()
        anchors.top: parent.top
        anchors.topMargin: 70
        anchors.horizontalCenter: parent.horizontalCenter
    }

    Rectangle {
        id: rect2
        color: "#ff0000"
        width: 440
        height: 30
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 120
    }

    Rectangle {
        id: rect3
        color: "#ff0000"
        width: 440
        height: 30
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 170
    }

}

我的 VMAutoCompleteComboBox.qml

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1

Item {

    property string vmLabel : ""
    property var vmList: []
    property var vmValues: []
    property int vmMaxOptions: 10

    function filter(){

        // Creating the model list
        modelList.clear()

        var count = 0;
        for (var i = 0; i < vmList.length; i++){
           if ((vmList[i].toLowerCase().search(lineEdit.text.toLowerCase()) !== -1) || (lineEdit.text === "")){
               var data = "";
               if (i < vmValues.length) data = vmValues[i];               
               modelList.append({"vmText": vmList[i], "vmData": data, "vmIndex": count});
               count++;
               if (count == vmMaxOptions) break;
           }
        }

        // Updating the height of the patient list.
        listView.height = lineEditRect.height*(count+1);
    }

    Rectangle {
        id: lineEditRect
        anchors.fill: parent
        color: "#ebf3fa"
        border.width: 0
        height: parent.height
    }

    ListModel {
        id: modelList
    }

    Rectangle {
        id: subLine
        width: lineEditRect.width
        height: 1;
        border.color: "#297fca"
        color: "#297fca"
        anchors.bottom: lineEditRect.bottom
    }

    TextInput {
        property bool vmFilterEnable: true
        id: lineEdit
        font.pixelSize: 13
        anchors.bottom: subLine.top
        anchors.bottomMargin: 5
        verticalAlignment: TextInput.AlignVCenter
        leftPadding: 5
        width: lineEditRect.width
        onTextChanged: {
            if (!vmFilterEnable ) return;
            filter();
        }
        onCursorVisibleChanged: {
            if (cursorVisible) filter();
        }
    }

    Text{
        id: labelText
        text: vmLabel
        color:  "#297fca"
        font.pixelSize: 11
        anchors.left: lineEditRect.left
        anchors.bottom: lineEdit.top
        anchors.bottomMargin: 5
        visible: (vmLabel != "")
    }

    ListView {
        id: listView
        width: parent.width
        model: modelList
        anchors.top: lineEditRect.bottom
        anchors.left: lineEditRect.left
        layer.enabled: true
        clip: true
        delegate: VMAutoCompleteCBEntry {
            width: lineEditRect.width
            height: lineEditRect.height
            layer.enabled: true
            clip: true
            onClicked: {
                console.log("Clicked on text: " + text + " that has data " + data + " with index " + index);
            }
        }
    }

}

最后是我的 VMAutoCompleteCBEntry

import QtQuick 2.6

Rectangle {

    signal clicked(string text, string data, int index);

    id: contentRect
    color: mouseDetect.containsMouse? "#cfcfcf" : "#ffffff"
    border.width: 1
    border.color: "#cfcfcf"
    z: 10

    MouseArea {
        id: mouseDetect
        hoverEnabled: true
        anchors.fill: parent
        onClicked: contentRect.clicked(vmText,vmData,vmIndex);
    }

    Text {
        id: contentText
        text: vmText
        //color: (labelText.visible)? "#58595b" : "#cfcfcf"
        color: "#202020"
        //font.family: viewHome.robotoR.name
        font.pixelSize: 13
        verticalAlignment: TextInput.AlignVCenter
        anchors.verticalCenter: contentRect.verticalCenter
        leftPadding: 5
    }

}

我将在我的项目中提供所有其他文件，以提供完整的 MWE。然而，下面大部分代码的唯一目的只是提供一个国家名称和 ISO 国家代码的字符串列表。

我的国家.h

#ifndef COUNTRIES_H
#define COUNTRIES_H

#include <QStringList>

struct CountryStruct {

public:
    void fillCountryList(bool inEnglish = true) {
        if (COUNTRY_CODE.size() != 0) return;
        /// TODO: Get the country list in spanish.
        if ((inEnglish) || (!inEnglish)){
            COUNTRY_LIST <<  "Afghanistan" << "Åland Islands" << "Albania" << "Algeria" << "American Samoa" << "Andorra" << "Angola" << "Anguilla" << "Antarctica"
                          << "Antigua and Barbuda" << "Argentina" << "Armenia" << "Aruba" << "Australia" << "Austria" << "Azerbaijan" << "Bahamas" << "Bahrain"
                          << "Bangladesh" << "Barbados" << "Belarus" << "Belgium" << "Belize" << "Benin" << "Bermuda" << "Bhutan" << "Bolivia, Plurinational State of"
                          << "Bonaire, Sint Eustatius and Saba" << "Bosnia and Herzegovina" << "Botswana" << "Bouvet Island" << "Brazil" << "British Indian Ocean Territory"
                          << "Brunei Darussalam" << "Bulgaria" << "Burkina Faso" << "Burundi" << "Cambodia" << "Cameroon" << "Canada" << "Cape Verde" << "Cayman Islands"
                          << "Central African Republic" << "Chad" << "Chile" << "China" << "Christmas Island" << "Cocos (Keeling) Islands" << "Colombia" << "Comoros" << "Congo"
                          << "Congo, the Democratic Republic of the" << "Cook Islands" << "Costa Rica" << "Côte d'Ivoire" << "Croatia" << "Cuba" << "Curaçao" << "Cyprus"
                          << "Czech Republic" << "Denmark" << "Djibouti" << "Dominica" << "Dominican Republic" << "Ecuador" << "Egypt" << "El Salvador" << "Equatorial Guinea"
                          << "Eritrea" << "Estonia" << "Ethiopia" << "Falkland Islands (Malvinas)" << "Faroe Islands" << "Fiji" << "Finland" << "France" << "French Guiana"
                          << "French Polynesia" << "French Southern Territories" << "Gabon" << "Gambia" << "Georgia" << "Germany" << "Ghana" << "Gibraltar" << "Greece"
                          << "Greenland" << "Grenada" << "Guadeloupe" << "Guam" << "Guatemala" << "Guernsey" << "Guinea" << "Guinea-Bissau" << "Guyana" << "Haiti"
                          << "Heard Island and McDonald Islands" << "Holy See (Vatican City State)" << "Honduras" << "Hong Kong" << "Hungary" << "Iceland" << "India"
                          << "Indonesia" << "Iran, Islamic Republic of" << "Iraq" << "Ireland" << "Isle of Man" << "Israel" << "Italy" << "Jamaica" << "Japan" << "Jersey"
                          << "Jordan" << "Kazakhstan" << "Kenya" << "Kiribati" << "Korea, Democratic People's Republic of" << "Korea, Republic of" << "Kuwait" << "Kyrgyzstan"
                          << "Lao People's Democratic Republic" << "Latvia" << "Lebanon" << "Lesotho" << "Liberia" << "Libya" << "Liechtenstein" << "Lithuania" << "Luxembourg"
                          << "Macao" << "Macedonia, the former Yugoslav Republic of" << "Madagascar" << "Malawi" << "Malaysia" << "Maldives" << "Mali" << "Malta"
                          << "Marshall Islands" << "Martinique" << "Mauritania" << "Mauritius" << "Mayotte" << "Mexico" << "Micronesia, Federated States of"
                          << "Moldova, Republic of" << "Monaco" << "Mongolia" << "Montenegro" << "Montserrat" << "Morocco" << "Mozambique" << "Myanmar" << "Namibia" << "Nauru"
                          << "Nepal" << "Netherlands" << "New Caledonia" << "New Zealand" << "Nicaragua" << "Niger" << "Nigeria" << "Niue" << "Norfolk Island"
                          << "Northern Mariana Islands" << "Norway" << "Oman" << "Pakistan" << "Palau" << "Palestinian Territory, Occupied" << "Panama" << "Papua New Guinea"
                          << "Paraguay" << "Peru" << "Philippines" << "Pitcairn" << "Poland" << "Portugal" << "Puerto Rico" << "Qatar" << "Réunion" << "Romania"
                          << "Russian Federation" << "Rwanda" << "Saint Barthélemy" << "Saint Helena, Ascension and Tristan da Cunha" << "Saint Kitts and Nevis" << "Saint Lucia"
                          << "Saint Martin (French part)" << "Saint Pierre and Miquelon" << "Saint Vincent and the Grenadines" << "Samoa" << "San Marino" << "Sao Tome and Principe"
                          << "Saudi Arabia" << "Scotland" << "Senegal" << "Serbia" << "Seychelles" << "Sierra Leone" << "Singapore" << "Sint Maarten (Dutch part)" << "Slovakia" << "Slovenia"
                          << "Solomon Islands" << "Somalia" << "South Africa" << "South Georgia and the South Sandwich Islands" << "South Sudan" << "Spain" << "Sri Lanka" << "Sudan"
                          << "Suriname" << "Svalbard and Jan Mayen" << "Swaziland" << "Sweden" << "Switzerland" << "Syrian Arab Republic" << "Taiwan, Province of China"
                          << "Tajikistan" << "Tanzania, United Republic of" << "Thailand" << "Timor-Leste" << "Togo" << "Tokelau" << "Tonga" << "Trinidad and Tobago" << "Tunisia"
                          << "Turkey" << "Turkmenistan" << "Turks and Caicos Islands" << "Tuvalu" << "Uganda" << "Ukraine" << "United Arab Emirates" << "United Kingdom"
                          << "United States" << "United States Minor Outlying Islands" << "Uruguay" << "Uzbekistan" << "Vanuatu" << "Venezuela, Bolivarian Republic of" << "Viet Nam"
                          << "Virgin Islands, British" << "Virgin Islands, U.S." << "Wallis and Futuna" << "Western Sahara" << "Yemen" << "Zambia" << "Zimbabwe";
        }
        /// TODO: Get the country list in english
        else return;

        COUNTRY_CODE << "AF" << "AX" << "AL" << "DZ" << "AS" << "AD" << "AO" << "AI" << "AQ" << "AG" << "AR" << "AM" << "AW" << "AU" << "AT" << "AZ"
                     << "BS" << "BH" << "BD" << "BB" << "BY" << "BE" << "BZ" << "BJ" << "BM" << "BT" << "BO" << "BQ" << "BA" << "BW" << "BV" << "BR"
                     << "IO" << "BN" << "BG" << "BF" << "BI" << "KH" << "CM" << "CA" << "CV" << "KY" << "CF" << "TD" << "CL" << "CN" << "CX" << "CC"
                     << "CO" << "KM" << "CG" << "CD" << "CK" << "CR" << "CI" << "HR" << "CU" << "CW" << "CY" << "CZ" << "DK" << "DJ" << "DM" << "DO"
                     << "EC" << "EG" << "SV" << "GQ" << "ER" << "EE" << "ET" << "FK" << "FO" << "FJ" << "FI" << "FR" << "GF" << "PF" << "TF" << "GA"
                     << "GM" << "GE" << "DE" << "GH" << "GI" << "GR" << "GL" << "GD" << "GP" << "GU" << "GT" << "GG" << "GN" << "GW" << "GY" << "HT"
                     << "HM" << "VA" << "HN" << "HK" << "HU" << "IS" << "IN" << "ID" << "IR" << "IQ" << "IE" << "IM" << "IL" << "IT" << "JM" << "JP"
                     << "JE" << "JO" << "KZ" << "KE" << "KI" << "KP" << "KR" << "KW" << "KG" << "LA" << "LV" << "LB" << "LS" << "LR" << "LY" << "LI"
                     << "LT" << "LU" << "MO" << "MK" << "MG" << "MW" << "MY" << "MV" << "ML" << "MT" << "MH" << "MQ" << "MR" << "MU" << "YT" << "MX"
                     << "FM" << "MD" << "MC" << "MN" << "ME" << "MS" << "MA" << "MZ" << "MM" << "NA" << "NR" << "NP" << "NL" << "NC" << "NZ" << "NI"
                     << "NE" << "NG" << "NU" << "NF" << "MP" << "NO" << "OM" << "PK" << "PW" << "PS" << "PA" << "PG" << "PY" << "PE" << "PH" << "PN"
                     << "PL" << "PT" << "PR" << "QA" << "RE" << "RO" << "RU" << "RW" << "BL" << "SH" << "KN" << "LC" << "MF" << "PM" << "VC" << "WS"
                     << "SM" << "ST" << "SA" << "SQ" << "SN" << "RS" << "SC" << "SL" << "SG" << "SX" << "SK" << "SI" << "SB" << "SO" << "ZA" << "GS"
                     << "SS" << "ES" << "LK" << "SD" << "SR" << "SJ" << "SZ" << "SE" << "CH" << "SY" << "TW" << "TJ" << "TZ" << "TH" << "TL" << "TG"
                     << "TK" << "TO" << "TT" << "TN" << "TR" << "TM" << "TC" << "TV" << "UG" << "UA" << "AE" << "GB" << "US" << "UM" << "UY" << "UZ"
                     << "VU" << "VE" << "VN" << "VG" << "VI" << "WF" << "EH" << "YE" << "ZM" << "ZW";

    }

    QString getCodeForCountry(const QString &country){
        int index = COUNTRY_LIST.indexOf(country);
        if (index == -1) return "";
        else return COUNTRY_CODE.at(index);
    }

    QString getCountrFromCode (const QString &code){
        int index = COUNTRY_CODE.indexOf(code);
        if (index == -1)  return "";
        else return COUNTRY_LIST.at(index);
    }

    qint32 getIndexFromCode(const QString &countryCode){
        return COUNTRY_CODE.indexOf(countryCode);
    }

    QString getCodeFromIndex (int index){
        if (index == -1)  return "";
        else return COUNTRY_CODE.at(index);
    }

    QStringList getCountryList() const {return COUNTRY_LIST;}
    QStringList getCodeList() const {return COUNTRY_CODE;}

private:
    QStringList COUNTRY_LIST;
    QStringList COUNTRY_CODE;


};

#endif // COUNTRIES_H

我的装载机.h

#ifndef LOADER_H
#define LOADER_H

#include <QObject>
#include <QUrl>
#include <QQuickWindow>

#include "countries.h"


class Loader : public QObject
{
    Q_OBJECT
public:
    explicit Loader(QObject *parent = nullptr, CountryStruct *cs = nullptr);
    ~Loader();
    Q_INVOKABLE QStringList getCountryList() {return countries->getCountryList();}
    Q_INVOKABLE QStringList getCountryCodeList() {return countries->getCodeList();}
signals:

public slots:

private:
    // The list of countries and their codes.
    CountryStruct *countries;
};

#endif // LOADER_H

我的 loader.cpp

#include "loader.h"

Loader::Loader(QObject *parent, CountryStruct *cs) : QObject(parent)
{
    countries = cs;
    countries->fillCountryList();
}

Loader::~Loader(){

}

最后是我的 main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include "loader.h"

CountryStruct countries;

int main(int argc, char *argv[])
{
#if defined(Q_OS_WIN)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;

    Loader loader(nullptr,&countries);
    engine.rootContext()->setContextProperty("loader", &loader);

    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    return app.exec();
}

这是使用 Qt 5.9 使用 MSVC2015 32 位编译的（根据实际项目的要求）

问题如下图所示：

标签： c++qtqml

Answer 1

您必须将属性 z设置为相对于其他项目的高值，例如，1因为默认 z 是0.

VMAutoCompleteComboBox{
    id: diagDBDefaultCountry
    z: 1 // <--
    // ...