QML 命名混乱

Question

我有一个关于在 QML 文件中命名组件的基本问题。 我已经读到，顶部元素应该始终获得 id根，而父元素始终是对其上方下一个元素的引用。

我有两个 qml 文件，一个带有ListView ，一个带有 listview 委托

用户登录.qml

Item {
    id: root
    height: parent.height
    width: parent.width
    property var password: ['0', '1', '2', '3']
    property int selectedField : mill.selectedIndex
    property int selectedUser : 0
    property string p_background: configuration.getColor(Colors.ContentBackground)

    ColumnLayout { anchors.fill: parent
        Rectangle { id: userlist; Layout.fillWidth: true; Layout.fillHeight: true; Layout.preferredHeight: 300; color: p_background
            ColumnLayout { anchors.fill: parent
                ListView { Layout.fillWidth: true;  Layout.fillHeight: true
                    model: user.model
                    currentIndex: 1
                    onCurrentIndexChanged: { console.log("currentIndex changed") }
                    header: UserItemDelegate { p_index: -1; p_name: "Benutzeranmeldung"; p_icon: "password"; p_isHeader: true }
                    delegate: UserItemDelegate { p_index: index; p_name: name; p_icon: icon; p_isHeader: false }
                    spacing: 20
                }
            }
        }

UserItemDelegate.qml

Item {
    id: root
    height: configuration.getSize(Sizes.ListItemHeight)
    width: parent.width
    property int p_index
    property string p_name
    property string p_icon
    property bool p_isHeader
    property bool p_isSelected: root.ListView.view.currentIndex == p_index
    property string p_color: configuration.getColor(p_isHeader ? Colors.ListItemDisabled : (p_isSelected ? Colors.ListItemSelected : Colors.ListItemDefault)) 
    
    Rectangle { anchors.fill: parent; Layout.fillWidth: true; Layout.fillHeight: true; color: p_color
        RowLayout { anchors.verticalCenter: parent.verticalCenter; 
            Image { Layout.leftMargin: 10; sourceSize.height: root.height * 0.6; source: "image://iconprovider/" + p_icon }
            Label { Layout.leftMargin: 10; text: p_name }
        }
        MouseArea{ enabled: !p_isHeader; anchors.fill: parent; onClicked: { root.ListView.view.currentIndex = p_index; } } 
    }
}

使用root.Listview.view.currentIndex我可以访问父UserLogon.qml中的列表视图，尽管root是当前项目的 ID？

是否可以从委托访问 UserLogon.qml 中定义的计时器。 如果是这样，引用将如何？

Answer 1

首先，您不需要将每个根 object 命名为“root”。 我不知道你在哪里读到的，但你可以使用任何对你有意义的名字。

当您调用root.ListView.view.currentIndex时，这种情况下的root是委托的 ID，而不是列表。 QML 的范围规则保证了这一点。 然后， ListView.view附加属性允许您在不需要其 id 的情况下引用回列表。

您的计时器问题不清楚。 一般来说，是的，您可以从委托访问 ListView 的属性，但您通常应该以相反的方式进行。 ListView 应该引用委托的属性。 原因是您可能需要在其他地方使用该委托，并且在这种情况下您不一定希望它与 ListView 紧密耦合。 这是一个例子：

我的列表.qml

ListView {
    id: contactList

    Timer {
        id: backgroundTimer
        interval: 3000
        running: true
    }

    model: 5
    delegate: MyDelegate {
        width: contactList.width

        // ListView binds the delegate's 'timedOut' property to something
        timedOut: backgroundTimer.running
    }
}

我的委托.qml

Rectangle {
    id: contact
    property bool timedOut: false

    height: 30
    radius: height / 2
    color: timedOut ? "red" : "blue"
}