ListView.model 效果不佳

Question

在下面的代码中，我有一个 ListView，我用 JSON 数据提供它。我使用 parse 函数提取数据并将其分配给模型，即：

view.model = JSON.parse(io.text)

但是，似乎view.model没有获取数据，所以我的应用程序无法显示任何内容。

这是我的完整代码。

import QtQuick 2.0
import FilesIO 1.0
import QtQuick.Window 2.2
import QtQuick.Controls 1.3
import QtQml 2.2

ApplicationWindow{
    id: root
    width: 320
    height: 410
    title:"LOLLLLL"
    color: "white"
    visible: true
    property string currentStockId: ""
    property string currentStockName: ""
    function readDocument(){
        io.source =Qt.resolvedUrl( "/home/yuhongsong/Qt/Examples/Qt-5.4/quick/demos/stocqt/content/stoc.json");
        io.read();
        view.model=JSON.parse(io.text);
    }
    Component.onCompleted: readDocument()
    FileIO{
        id:io
    }
    
    
    ListView {
        id: view
        anchors.fill: parent
        width: parent.width
        clip: true
        keyNavigationWraps: true
        highlightMoveDuration: 0
        focus: true
        snapMode: ListView.SnapToItem
        /*    model:ListModel {
              id: stocks
              // Data from : http://en.wikipedia.org/wiki/NASDAQ-100
             ListElement {name: "Apple Inc."; stockId: "AAPL"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
              ListElement {name: "Adobe Inc"; stockId: "ADBE"; value: "0.0"; change: "0.0"; changePercentage: "0.0"}
    }
    */
        
        onCurrentIndexChanged: {
            mainRect.listViewActive = 0;
            root.currentStockId = model.get(currentIndex).stockId;
            root.currentStockName = model.get(currentIndex).name;
        }
        
        delegate: Rectangle {
            height: 102
            width: parent.width
            color: "transparent"
            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    view.currentIndex = index;
                }
            }
            
            Text {
                id: stockIdText
                anchors.top: parent.top
                anchors.topMargin: 15
                anchors.left: parent.left
                anchors.leftMargin: 15
                width: 125
                height: 40
                color: "#000000"
                font.family: "Droid Sans Georgian"
                font.pointSize: 20
                font.weight: Font.Bold
                verticalAlignment: Text.AlignVCenter
                text: stockId
            }
            
            Text {
                id: stockValueText
                anchors.top: parent.top
                anchors.topMargin: 15
                anchors.right: parent.right
                anchors.rightMargin: 0.31 * parent.width
                width: 190
                height: 40
                color: "#000000"
                font.family: "Droid Sans Ethiopic"
                font.pointSize: 20
                font.bold: true
                horizontalAlignment: Text.AlignRight
                verticalAlignment: Text.AlignVCenter
                text: value
                Component.onCompleted: view.getCloseValue(index);
            }
            
            Text {
                id: stockValueChangeText
                anchors.top: parent.top
                anchors.topMargin: 15
                anchors.right: parent.right
                anchors.rightMargin: 20
                width: 135
                height: 40
                color: "#328930"
                font.family: "Droid Sans Hebrew"
                font.pointSize: 20
                font.bold: true
                horizontalAlignment: Text.AlignRight
                verticalAlignment: Text.AlignVCenter
                text: change
                onTextChanged: {
                    if (parseFloat(text) >= 0.0)
                        color = "#328930";
                    else
                        color = "#d40000";
                }
            }
            
            Text {
                id: stockNameText
                anchors.top: stockIdText.bottom
                anchors.left: parent.left
                anchors.leftMargin: 15
                width: 330
                height: 30
                color: "#000000"
                font.family: "Open Sans"
                font.pointSize: 16
                font.bold: false
                elide: Text.ElideRight
                maximumLineCount: 1
                verticalAlignment: Text.AlignVCenter
                text: name
            }
            
            Text {
                id: stockValueChangePercentageText
                anchors.top: stockIdText.bottom
                anchors.right: parent.right
                anchors.rightMargin: 20
                width: 120
                height: 30
                color: "#328930"
                font.family: "Open Sans"
                font.pointSize: 18
                font.bold: false
                horizontalAlignment: Text.AlignRight
                verticalAlignment: Text.AlignVCenter
                text: changePercentage
                onTextChanged: {
                    if (parseFloat(text) >= 0.0)
                        color = "#328930";
                    else
                        color = "#d40000";
                }
            }
            
            Rectangle {
                id: endingLine
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                height: 1
                width: parent.width
                color: "#d7d7d7"
            }
        }
        
        highlight: Rectangle {
            width: parent.width
            color: "#eeeeee"
        }
    }
    
}

这里是用作输入的 stoc.json。

[
   {
      "name": "Apple Inc",
      "stockId":"AAPL",
      "value":"0.0",
      "change":"0.0",
      "changepercentage":"0.0"
    },
    {
      "name": "Adobe Inc",
      "stockId":"ADBE",
      "value":"0.0",
      "change":"0.0",
      "changepercentage":"0.0"
    },
    {
      "name": "Analog Devices Inc",
      "stockId":"ADI",
      "value":"0.0",
      "change":"0.0",
      "changepercentage":"0.0"
    },
    {
      "name": "Automatic Data Processing Inc",
      "stockId":"ADP",
      "value":"0.0",
      "change":"0.0",
      "changepercentage":"0.0"
    },
]

Answer 1

查看 Qt docs 你可以读到

Models can be created directly in QML using ListModel, XmlListModel or VisualItemModel, or provided by C++ model classes.

因此，没有关于JSON数据。您应该将其转换为 ListModel 或提供任何其他合适的方法。

这里有一个关于如何实现转换的例子：

ListView {
    anchors.fill: parent
    model: ListModel {
        id: listModel
        Component.onCompleted: {
            var data = [{ "name": "Apple Inc", "stockId":"AAPL", "value":"0.0", "change":"0.0", "changepercentage":"0.0" }, { "name": "Adobe Inc", "stockId":"ADBE", "value":"0.0", "change":"0.0", "changepercentage":"0.0" }, { "name": "Analog Devices Inc", "stockId":"ADI", "value":"0.0", "change":"0.0", "changepercentage":"0.0" }, { "name": "Automatic Data Processing Inc", "stockId":"ADP", "value":"0.0", "change":"0.0", "changepercentage":"0.0" }]
            for(var i = 0;i < data.length;i ++) {
                listModel.append(data[i]);
            }
        }
    }
    delegate: Text {
        text: name + ", " + stockId + ", " + value + ", " + change + ", " + changepercentage
    }
}

ListView.model 效果不佳

ListView.model does not work well

qt

qml

qtquick2