Question

我正在开发QML / Qt应用程序，我有ListView，名称 ueUserInfoListView ：

    ListView
    {
        id: ueUserInfoListView

        antialiasing: true

        Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
        Layout.fillWidth: true
        Layout.fillHeight: true
        Layout.margins: 8

        clip: true

        spacing: 64

        orientation: ListView.Horizontal

        highlightFollowsCurrentItem: true

        delegate: Image
        {
            id: ueUserInfoListViewDelegate

            source: "image://uePeopleModel/"+model.ueRoleImage

            opacity: 0.3

            fillMode: Image.PreserveAspectFit

            function ueDoOpacity()
            {
                if(ueUserInfoListViewDelegate===ueUserInfoListView.currentItem)
                    opacity=1.0
                else
                    opacity=0.3
            }

            Behavior on opacity
            {
                NumberAnimation
                {
                    duration: 300
                }   // NumberAnimation
            }   // Behavior

            Component.onCompleted:
            {
                ueUserInfoListViewDelegate.focusChanged.connect(ueDoOpacity)
            }   // Component.onCompleted
        }   // delegate

        Component.onCompleted:
        {
            model=uePeopleModel
        }   // Component.onCompleted

        preferredHighlightBegin: width/2-70
        preferredHighlightEnd: width/2+70
        highlightRangeMode: ListView.StrictlyEnforceRange
        currentIndex: count/2
    }   // ListView

我试图从另一个名为 ueProductSelector 的 ueProductSelector 中分离出来的 ueUserInfoListView Item：

import QtQuick 2.5
import QtQuick.Layouts 1.2

import si.mikroelektronika 1.0

Item
{
    id: ueProductSelector

    antialiasing: true

    clip: true

    Rectangle
    {
        id: ueProductSelectorWrapper

        radius: 16
        gradient: Gradient
        {
            GradientStop
            {
                position: 0
                color: "#ffffff"
            }   // GradientStop

            GradientStop
            {
                position: 1
                color: "#000000"
            }   // GradientStop
        }   // Gradient

        border.color: "#4682b4"
        border.width: 1

        antialiasing: true

        anchors.centerIn: parent
        anchors.fill: parent

        ColumnLayout
        {
            anchors.margins: parent.radius/2

            spacing: 0
            antialiasing: true

            anchors.fill: parent
            anchors.centerIn: parent

            GridView
            {
                id: ueProductGridView

                antialiasing: true

                clip: true

                Layout.fillWidth: true
                Layout.fillHeight: true

                cellWidth: 144
                cellHeight: 144

                model: ueProductsModel

                delegate: Rectangle
                {
                    radius: 16

                    clip: true

                    width: ueProductGridView.cellWidth-8
                    height: ueProductGridView.cellHeight-8

                    border.color: "#4682b4"

                    antialiasing: true

                    gradient: Gradient
                    {
                        GradientStop
                        {
                            position: 0
                            color: "#000000"

                            ParallelAnimation on color
                            {
                                id: ueProductSelectorDelegateMouseAreaAnimation

                                loops: 1
                                running: false//ueDelegateMouseArea.pressed

                                ColorAnimation
                                {
                                    from: "#4682b4"
                                    to: "#000000"
                                    duration: 100
                                }   // ColorAnimation
                            }   // ParallelAnimation
                        }   // GradientStop

                        GradientStop
                        {
                            position: 1
                            color: "#ffffff"
                        }   // GradientStop
                    }   // Gradient

                    MouseArea
                    {
                        id: ueDelegateMouseArea

                        anchors.fill: parent

                        onClicked:
                        {
                            var selectedIndex=ueProductGridView.currentIndex=index;

                            ueProductSelectorDelegateMouseAreaAnimation.running=true;
                            ueProductGridView.currentIndex=index;

                             ueOrdersModel.ueSetRecordValues(ueUserInfoListView.model.get(ueUserInfoListView.currentIndex).ueRoleId,
                                                             uePlacesListView.model.get(uePlacesListView.currentIndex).ueRoleId,
                                                             ueProductGridView.model.get(selectedIndex).ueRoleProductId,
                                                             1);
                        }   // onClicked
                    }   // MouseArea

                    ColumnLayout
                    {
                        anchors.centerIn: parent
                        anchors.fill: parent

                        antialiasing: true

                        spacing: 8

                        Image
                        {
                            Layout.fillWidth: true
                            Layout.fillHeight: false
                            Layout.alignment: Qt.AlignCenter|Qt.AlignTop
                            Layout.topMargin: ueProductSelectorWrapper.radius+4

                            fillMode: Image.PreserveAspectFit

                            horizontalAlignment: Image.AlignHCenter
                            verticalAlignment: Image.AlignVCenter

                            antialiasing: true
                            source: "image://ueProductsModel/"+model.ueRoleImage
                        }   // Image

                        Text
                        {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.alignment: Qt.AlignCenter|Qt.AlignBottom
                            Layout.bottomMargin: ueProductSelectorWrapper.radius+4

                            color: "#000000"

                            text: model.ueRoleProductName
                            wrapMode: Text.WordWrap
                            font.family: "Courier"
                            textFormat: Text.RichText

                            font.bold: true
                            font.pointSize: 10

                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                        }   // Text
                    }   // ColumnLayout
                }   // delegate

                Component.onCompleted:
                {
                    ueProductSelectorOpacityAnimator.running=true
                }
            }   // GridView
        }   // ColumnLayot
    }   // Rectangle
}   // Item

我收到以下错误：

qrc：/gui/items/UeProductSelector.qml：126：ReferenceError： ueUserInfoListView未定义为什么呢？

Answer 1

如果在MouseArea中声明UeDelegate.qml，并且UeListView.qml（为示例而假想的文件名）包含指定ListView的{{1}} } UeDelegate，would work。根据您提供给我们的信息，我们只能假设delegate不是ListView的祖先。

详细说明这个概念：

组件实例范围层次结构也扩展到外部组件。在以下示例中，TitlePage.qml组件创建两个TitleText实例。即使TitleText类型位于单独的文件中，它仍然可以在TitlePage中使用title属性时访问title属性。 QML是一种动态范围的语言 - 取决于它的使用位置，title属性可能会以不同的方式解析。

MouseArea

Answer 2

嗯，你应该不这样做。在单独的QML组件文件中使用另一个组件的ID是邪恶的！

尽量避免这种情况。它将耦合您的QML组件，并且它们不是真正可重复使用的。

因此，要解决您的问题，您应将ListView组件作为属性传递给ueProductSelector组件：

    import QtQuick 2.5
    import QtQuick.Layouts 1.2

    import si.mikroelektronika 1.0

    Item
    {
        id: ueProductSelector

        antialiasing: true

        clip: true

        property ListView ueUserInfoListView

        // [...]
    }

然后你应该可以打电话了

ueOrdersModel.ueSetRecordValues(ueUserInfoListView.model.get(ueUserInfoListView.currentIndex).ueRoleId,
                                                             uePlacesListView.model.get(uePlacesListView.currentIndex).ueRoleId,
                                                             ueProductGridView.model.get(selectedIndex).ueRoleProductId,
                                                             1);

在你的第二个组件中。

ListView组件作为（QObject*）的引用传递，不应该对性能至关重要。

ReferenceError：未定义ueUserInfoListView

2 个答案: