Hi,
I use AppFlickable, Repeater, Model, Delegate. I found few examples and trying to learn something from all. So I made a single project using AppFlickable, Repeater, Model, Delegate as something with my understanding. To me it is a good example. But I need someone to explain to me step by step looking me example. If I can get better way do things I will be glad to learn.
Here is my live weather code:
import Felgo 3.0
import QtQuick 2.9
import QtQuick.Layouts 1.3
import "../singletons"
Item {
id: myWeatherItem
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
width: CbStyle.appWidth - 25
height: CbStyle.appHeight * 0.27
anchors.leftMargin: dp(5)
anchors.rightMargin: dp(5)
Text {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: sp(30)
font.bold: true
color: "white"
text: "....."
}
Rectangle {
anchors.fill: parent
color: "white"
opacity: 0.1
}
AppFlickable {
id: myFlickable
anchors.fill: parent
flickableDirection: Flickable.HorizontalFlick
Column {
Repeater {
model: ["1"]
Row {
onHeightChanged: myFlickable.contentHeight = height
onWidthChanged: myFlickable.contentWidth = width
spacing: 10
anchors.horizontalCenter: parent.horizontalCenter
Repeater {
model: ListModel { id: modelData }
delegate: Item {
id: myDelegate
width: myWeatherItem.width / 5
height: myWeatherItem.height
// Content
ColumnLayout {
anchors.fill: parent
anchors.topMargin: 10
anchors.bottomMargin: 10
// day
Text {
id: mDay
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
anchors.top: parent.top
anchors.topMargin: 100
font.pixelSize: sp(14)
color: "#ffffff"
text: model.day
}
Text {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
anchors.top: mDay.bottom
anchors.topMargin: 10
font.pixelSize: sp(8)
color: "#ffffff"
text: model.date
}
// icon
Image {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
anchors.centerIn: parent
scale: 1.5
source: model.iconText
clip: true
}
// temperature
Text {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 100
font.pixelSize: sp(14)
font.bold: true
color: "#ffffff"
text: "%1ËšC".arg(model.temperature)
}
// seperator
Rectangle {
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
width: 1
height: (myWeatherItem.height * 0.75)
color: "lightgrey"
}
} // Contents
} // delegate: Item
Component.onCompleted: {
var request = new XMLHttpRequest();
request.open('GET', "https://query.yahooapis.com/v1/public/yql?qid=************************')&format=json", true);
request.onreadystatechange = function() {
if (request.readyState === XMLHttpRequest.DONE) {
if (request.status && request.status === 200) {
var result = JSON.parse(request.responseText)
var list = result.query.results.channel.item.forecast
result = ""
modelData.clear()
for(var i in list) {
var getStatusIcon = list[i].code
modelData.append({ "day": list[i].day,
"date": list[i].date,
"iconText": "../../assets/weather/" + getStatusIcon + ".png",
"temperature": list[i].high
});
getStatusIcon = ""
} // for
}
else {
console.log("WeatherLog:", request.status, request.statusText)
}
} // if (request.readyState
} // function
request.send();
}
} // Repeater
} // Row
} // Repeater
} // Column
} // AppFlickable
}
