QML-Listview (Cpp-Model) Details-Dialog答案

【问题标题】：QML-Listview (Cpp-Model) Details-DialogQML-Listview (Cpp-Model) Details-Dialog
【发布时间】：2014-08-25 06:20:12
【问题描述】：

编辑：26.08.2014 08:20 - 完全重新设计的问题！

我想做的是：

用来自 cpp-listmodel (QAbstractListModel) 的数据填充 qml-listview。
通过单击 listview-item 打开一个对话框，显示来自 cpp-listmodel 的更多数据。

我有两个 cpp 类：

DataModelItem 具有两个属性（listData（显示在列表视图中）和 detailsData（显示在对话框中））
DataModel 继承 QAbstractListModel 并带有属性 QList itemList。

DataModel.cpp：

QVariant DataModel::data(const QModelIndex &index, int role) const
{
    DataModelItem *item = m_itemList.at(index.row());
    switch (role) {
    case ListDataRole:
        return QString().sprintf("%.2f", item->listData());
        break;
    case DetailsDataRole:
        return QString().sprintf("%.4f", item->detailsData());
        break;
    default:
        qDebug () << "role not handled";
    }

    return QVariant();
}

我现在想做的是，在 ListView 中显示 listData。当我单击一个 ListItem 时，应该会出现一个包含 detailsData 的对话框。

【问题讨论】：

标签： c++ listview qml datamodel

【解决方案1】：

我发现，我无法在我的主应用程序中编写 model.detailsData，但只有 detailsData 有效（我也尝试了 listview.model.detailsData，但没有任何效果）。可能有人知道为什么这不起作用。

反正我找到了解决办法。

下面是工作示例：

main.qml

import QtQuick 1.1

Rectangle {
    width: 200
    height: 400

    ListView {
        id: listView

        model: dataModel
        delegate: listDelegate
    }

    Component {
        id: listDelegate

        Item {
            id: delegateItem
            width: listDataText.width
            height: listDataText.height
            Text {
                id: listDataText
                text: listData
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    console.log(detailsData)
                    itemDetails.details = model.detailsData
                    itemDetails.visible = true
                }
            }
        }
    }

    DetailsDialog {
        id: itemDetails
        visible: false
        anchors.centerIn: parent
    }
}

DetailsDialog.qml

import QtQuick 1.1

Rectangle {
    property alias details: detailsText.text
    width: 100
    height: 62

    Text {
        id: detailsText

    }
}

【讨论】：