qt - QML ListView - 更改除当前项目之外的所有项目

Question

我正在关注this Qt 4.8 的教程(每个条目中没有可滑动的内容)，同时使用 Qt 5.7 和 QtQuick 2.0。其中ListView的工作方式如下:

1. 用户点击列表中的项目
2. 显示项目的替代(详细) View
3. 用户必须单击详细 View 中的关闭按钮才能将条目状态重置为其默认紧凑 View 。

这会导致困惑，在某些时候，如果用户单击所有项目，在这种情况下，所有项目都将显示在完整 View 中。让用户每次打开详细 View 时都单击关闭按钮也不太方便。

我已将条目更改为在用户单击 View 时关闭。我还试图防止这种困惑并实现更(omho)流动的行为:

1. 用户点击列表中的项目
2. 显示项目的替代 View
3. 用户点击详细 View 可将条目状态重置为其默认紧凑 View 或
4. 用户点击另一个条目，当前详细 View 中的所有条目都会重置为紧凑 View

目前，我正在循环遍历 ListView 的 contentItem.children[loop_index] 并将状态设置为 "" (“详细信息” = 显示详细 View | “” = 显示紧凑 View )。由于 ListView 的工作方式(按需加载/卸载委托(delegate))，这是非常不可靠的，当我尝试访问其他委托(delegate)的状态时，我经常得到 undefined reference 。我用来完成所有这些操作的以下 MouseArea 是每个委托(delegate)的一部分:

// state is a QML `State` that is bound to the delegate (see below for the details on it)
MouseArea {
    anchors.fill: background
    onClicked: {
        // Iterate through all other entries and close them
        for (var entry = 0; entry < listView.count; ++entry) {
            if(listView.contentItem.children[entry] !== gestureEntry) {
                console.log("Hide other element");
                listView.contentItem.children[entry].state = ""; // IT FAILS HERE (SOMETIMES)
            }
        }

        // Change view of current entry
        if(gestureEntry.state === "Details") {
            gestureEntry.state = "";
            console.log("Hiding details")
        }
        else {
            gestureEntry.state = "Details";
            console.log("Showing details");
        }
    }
}

其中 state 是委托(delegate)的状态:

states: State {
    name: "Details"

    PropertyChanges { target: background; color: "white" }
    PropertyChanges { target: gestureImage; width: 130; height: 130 } // Make picture bigger
    PropertyChanges { target: gestureEntry; detailsOpacity: 1; x: 0; y: 0 } // Make details visible
    PropertyChanges { target: gestureEntry; height: listView.height } // Fill the entire list area with the detailed view
}

我认为 state 信息可以存储在 ListModel 本身内部，从而可以迭代模型的内容(与代表)但是我不知道当模型中的条目发生更改时如何自动更新我的列表(以及当前可见/不可见的代表)。从我到目前为止发现的情况来看，似乎不可能做到这一点，因为 ListView 不会主动监视其 ListModel。

事实确实如此吗？如果是，那么是否有可能以不同的方式解决这个问题？

Answer 1

为什么不使用 ListView 的 currentIndex 属性？只需像这样修改您的委托(delegate):

Item {
    id: gestureEntry
    ...
    state: ListView.isCurrentItem?"Details":""
    ...
    MouseArea {
        anchors.fill: background
        onClicked: {
            if(listView.currentIndex == index)
                listView.currentIndex = -1
            else
                listView.currentIndex = index
        }
    }
}

编辑:上述解决方案的唯一问题是，在加载时，ListView 中的一个条目会被预先选择，从而自动触发该条目的详细 View 。为了避免以下情况需要添加到listView:

Component.onCompleted: {
    listView.currentIndex = -1;
}

这可确保不会预先选择任何条目。