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.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support