Ciao a tutti, Sono nuovo sul forum e anche di QT. Sto realizzando un prototipo a scopo lavorativo di una web app che già abbiamo, e voglio trasformare in un app per migliorare sopratutto le performance. Sto realizzando una pagina per visualizzare una programmazione oraria di un termostato. La programmazione viene caricata da un JSON tramite una REST API che carico attraverso Javascript. Per il frontend uso QML come linguaggio. Sono riuscito a ricavarmi il model con tutte le informazioni, ma non riesco a visualizzarle come vorrei. Mi esce fuori un ListView unico con tutti i periodi di ognisingolo giorno, disposti verticalmente, mentreio vorrei una riga per ogni giorno, e in ogni giorno visualizzare x rettangoli disposti orizzontalmente, tanti quanti sonoi periodi. Il JSON d'esempio è il seguente: {"zone":"1","season":"summer","daily_schedule":[{"times_of_operation":[{"start":"0:00","stop":"6:30","temp":"29"},{"start":"6:30","stop":"8:30","temp":"26"},{"start":"8:30","stop":"17:00","temp":"30"},{"start":"17:00","stop":"22:00","temp":"26"},{"start":"22:00","stop":"24:00","temp":"29"}],"weekday":"monday"},{"times_of_operation":[{"start":"0:00","stop":"6:30","temp":"29"},{"start":"6:30","stop":"8:30","temp":"26"},{"start":"8:30","stop":"17:00","temp":"32"},{"start":"17:00","stop":"22:00","temp":"26"},{"start":"22:00","stop":"24:00","temp":"29"}],"weekday":"tuesday"},{"times_of_operation":[{"start":"0:00","stop":"6:30","temp":"29"},{"start":"6:30","stop":"8:30","temp":"26"},{"start":"8:30","stop":"17:00","temp":"32"},{"start":"17:00","stop":"22:00","temp":"26"},{"start":"22:00","stop":"24:00","temp":"29"}],"weekday":"wednesday"},{"times_of_operation":[{"start":"0:00","stop":"6:30","temp":"29"},{"start":"6:30","stop":"8:30","temp":"26"},{"start":"8:30","stop":"17:00","temp":"32"},{"start":"17:00","stop":"22:00","temp":"26"},{"start":"22:00","stop":"24:00","temp":"29"}],"weekday":"thursday"},{"times_of_operation":[{"start":"0:00","stop":"6:30","temp":"29"},{"start":"6:30","stop":"8:30","temp":"26"},{"start":"8:30","stop":"17:00","temp":"32"},{"start":"17:00","stop":"22:00","temp":"26"},{"start":"22:00","stop":"24:00","temp":"29"}],"weekday":"friday"},{"times_of_operation":[{"start":"0:00","stop":"8:30","temp":"29"},{"start":"8:30","stop":"22:00","temp":"26"},{"start":"22:00","stop":"24:00","temp":"29"}],"weekday":"saturday"},{"times_of_operation":[{"start":"0:00","stop":"8:30","temp":"29"},{"start":"8:30","stop":"22:00","temp":"26"},{"start":"22:00","stop":"24:00","temp":"30"}],"weekday":"sunday"}]} I periodi si ricavano da times_of_operation, e questo è il codice che ho usato per ricavare le informazioni e inserirle nel listview. ListView { model: ListModel { id: model} delegate: myRectComp; width: parent.width height: parent.height spacing: 2 // 'b' space between elements //orientation: Qt.Horizontal section.property: "weekday" section.criteria: ViewSection.FullString section.delegate: sectionHeading } Component.onCompleted: { var xhr = new XMLHttpRequest; xhr.open("GET", constants.baseURL + "/api/thermostat.php?zone=1&season=summer"); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { var data = JSON.parse(xhr.responseText); model.clear(); var list = data["daily_schedule"]; for (var i in list) { for (var k in list[i].times_of_operation) { var start = list[i].times_of_operation[k].start; var stop = list[i].times_of_operation[k].stop; var temp = list[i].times_of_operation[k].temp; var color = Schedule.color_map(temp, 'summer'); var width = ((Schedule.decode_time(stop) - Schedule.decode_time(start)) / 24) * window.width model.append( { 'weekday': list[i]["weekday"], 'myTemp': temp, 'myWidth': width, 'myColor': color, 'myTime': start } ); } } } } xhr.send(); } Component { id: myRectComp; ColumnLayout { Rectangle { color: myColor; Text { anchors.centerIn: parent color: 'black' text: myTemp font.pixelSize: 12 font.bold: true } width: myWidth; height: 50; } Rectangle { color: '#000'; Text { color: 'white' text: myTime font.pixelSize: 10 font.bold: true } width: myWidth; height: 10; } } } Component { id: sectionHeading Rectangle { width: window.width height: childrenRect.height color: "#000" Text { text: section font.bold: true color: 'white' font.pixelSize: 12 } } } } Con questo codice ottengo il seguente risultato: Come già detto le informazioni che ottengo e che visualizzo sono corrette, ma vengono visualizzate male, perchè devo raggruppare i rettangoli sotto ogni giorno, in un unica riga. Ci sto sbattendo la testa da diversi giorni, spero possiate aiutarmi. Grazie

Hello, Hope that you can translate this. There are many people recommending to use Treeview instead for this sort of listing. But as of Qt 5.12 there is a component called TableView.. That component will let you do what you want to. And there is not much changes needed in your code. If you need to use any earlier version of Qt then you should use treeview :) This is the basic example loaded from doc.qt.io import QtQuick 2.14 import Qt.labs.qmlmodels 1.0 TableView { anchors.fill: parent columnSpacing: 1 rowSpacing: 1 clip: true model: TableModel { TableModelColumn { display: "name" } TableModelColumn { display: "color" } rows: [ { "name": "cat", "color": "black" }, { "name": "dog", "color": "brown" }, { "name": "bird", "color": "white" } ] } delegate: Rectangle { implicitWidth: 100 implicitHeight: 50 border.width: 1 Text { text: display anchors.centerIn: parent } } } Hope this helps!

Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you have been placed in read-only mode.

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

Riempire un ListView da un JSON complesso

Solved Italian

21 Posts 2 Posters 5.2k Views

M MEMekaniske

@marco_88 hey, are you still working on this or have you got it solved?
M Offline
M Offline
marco_88

wrote on last edited by

#21

@MEMekaniske This part works. I ask if is clear way how do it. Now I have some problems with clock timer. I open another post.

Thanks
1 Reply Last reply

0