Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

Forums

OverviewFelgo 2 Support (Qt 5) › AppFlickable, Repeater, Model, Delegate. Can anyone explain to me step by step?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #18821

    Niyazi

    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
    }
    
    

     

    #18896

    Günther
    Felgo Team

    The code looks ok!

    You do not really need the top-level Repeater if you set the model to [“1“] (one element).
    Best,
    Günther

    #18898

    Niyazi

    Thanks Gunther 🙂

Viewing 3 posts - 1 through 3 (of 3 total)

RSS feed for this thread

You must be logged in to reply to this topic.